CODEWITHSUNDEEP
htmlcss
Kelly
Kelly

Reputation: 121

Changing divs when hovering over a different div

I am trying to change the visibility of one div when hovering over another. When the viewer hovers over an image, I would like the hovered image to expand and the other image's text boxes to become invisible. This is my HTML:

    <div id="Image1" class="Images">
        <img src="img/IMG_0212.JPG" width=200px height=auto>
        <p> Image 1 text </p>
    </div>

    <div id="Image2" class="Images">
        <img src="img/IMG_0169.JPG" width=200px height=auto>
        <p> Image 2 text </p>
    </div>

And my CSS:

#Image1:hover .Images {
    transform: scale(0.5);
    visibility: hidden;
}

#Image1:hover #Image1 {
    transform: scale(1.5);
    visibility:visible;
}

Please bear with me, as I am still fairly new to HTML and CSS. Everything I have found so far seems to require that the divs be nested or using Jquery. Is there any way to accomplish this just using HTML and CSS?

Upvotes: 0

Views: 178

Answers (4)

Jofre
Jofre

Reputation: 3898

No. There is no way to do it with just CSS.

You can do it with JQuery with something like what the other answers propose. If you don't like to use the library, you can use pure Javascript.

First, create 2 classes: .own_hover and .other_hover.

On your CSS create the same styles you already have, but applying them to these clases:

.other_hover {
    transform: scale(0.5);
    visibility: hidden;
}

.own_hover {
    transform: scale(1.5);
    visibility:visible;
}

(Note that this CSS would make the other images invisible, not the text boxes. You might want to change it to acomplish the behaviour described).

And now with just some pure Javascript you add an event listener to your images:

document.getElementsByClassName("Image").forEach(function(e){
    e.addEventListener("mouseenter", imageChanger);
    e.addEventListener("mouseleave", imageEqualizer)
}

Then you create a function that adds the corresponding classes (and later removes them).

function imageChanger(evt){
    evt.target.classList.add("own_hover");
    document.getElementsByClassName("Image").forEach(function(e){
        if(e != evt.target) e.ClassList.add("other_hover")});
}

function imageEqualizar(evt){
    document.getElementsByClassName("Image").forEach(function(e){
        e.ClassList.remove("other_hover");
        e.ClassList.remove("own_hover");
        });
}

With just about 15 lines of JS you can accomplish what you want.

I haven't tried it, but this is how I would tackle your problem. It's on your hands to try, fail, debug, and start over again until you reach the solution you need.

And please, if the list of images don't change, don't query the DOM every time, try to do something like 

var images = document.getElementsByClassName("Image")

Upvotes: 1

Syed Muhammad Zeeshan
Syed Muhammad Zeeshan

Reputation: 1045

try this using jquery:

$("img").mouseenter(function(){
    $("img").hide();
    $(this).css("transform" , "scale(1.5)");
    $(this).show();
}).mouseout(function(){
    $(this).css("transform" , "scale(0.5)");
    $("img").show();
});

Hope this helps.

Upvotes: 0

Ajey
Ajey

Reputation: 8222

You can use jquery hover to achieve this -

Here is the fiddle - DEMO

hover takes 2 callback function - $( selector ).hover( handlerIn, handlerOut );

handlerIn is called when you take the mouse cursor in and handlerOut is called when the cursor is taken out.

Let me know if you have any doubts.

Upvotes: 0

Aameer
Aameer

Reputation: 1376

it is easy if you use javascript, you can do something like this:

$('#Image1').hover(function(){
   $('#Image2').hide();
   enlarge_image($('#Image1'));
});
enlarge_image= function(image_arg){
//change height and width here
};

Hope it helps

Upvotes: 0

Related Questions