Affect div by hovering other div

Question

I am trying to affect one div by hovering another, and I have checked many of these questions that has already been answered here on Stackoverflow, this one and this one for example, and I have succeed to do it one way, where #a affects #b, but I am trying to let #b affect #a too - so the other way around, and none of the methods seem to have worked...

This is what worked ;

.plane1:hover ~ .plane2 {
    opacity: 0.2;
    transform: scale(0.9);
}

But all these didnt work;

#plane2:hover #plane1 { background-color: yellow; }
#plane2:hover + #plane1 { background-color: yellow; }
#plane2:hover > #plane1 { background-color: yellow; }
.plane2:hover #.plane1 { background-color: yellow; }
.plane2:hover + .plane1 { background-color: yellow; }
.plane2:hover > .plane1 { background-color: yellow; }

so any way I try to do this, it does not really seem to work. (yes, also tried with a ~)

Edit; My HTML

<div id="plane1" class="plane1 col-md-6 left scale-1 trans-6 opacity-7 hover-opacity"> 
  <img src="img/specs.jpg" class="img-thumbnail center" width="250" height="250" />
  <h4 class="center">That plane</h3>
</div>

<div id="plane2" class="plane2 col-md-6 left scale-1 trans-6 opacity-7 hover-opacity"> 
  <img src="img/specs.jpg" class="img-thumbnail center" width="250" height="250" />
  <h4 class="center">That other plane</h3>
</div>

GIF of what I am trying to accomplish here; http://i.imgur.com/s7atNDr.gif (too big to upload)

@indubitablee I know **nothing** about jquery, so I would be quite helpless in that case - CSS is perfered, but if jquery is the only way, then sure. — Albert MN., Sep 24 '15 at 18:07
The problem with this is, CSS is Cascading, so you won't be able to affect an earlier element with just CSS. Flexbox is one solution, but you'll find the best solution to be JQuery. — knocked loose, Sep 24 '15 at 18:12
Off topic: Your heading tags are messed up. You're mixing `H3` and `h4` tags. — isherwood, Sep 24 '15 at 18:13

score 2 · Answer 1 · edited May 23 '17 at 11:51

2

Simply put, there is no previous sibling selector.

Here's a solution using jQuery (which is very easy to use and has great docs):

$('.plane').hover(function () { // what happens on hover
    $(this).siblings().css({
        transform: 'scale(0.9)',
        opacity: '0.2'
    });
}, function () { // what happens after hover
    $(this).siblings().css({
        transform: 'scale(1)',
        opacity: '1'
    });
});

Demo

To use this, simply include it in a script tag just before your closing HTML tag. Add a reference to jQuery before it.

edited May 23 '17 at 11:51

Community

1
1

answered Sep 24 '15 at 18:12

isherwood

58,414
16
114
157

As said in the comment, I have no clue what to do with this code - I was also just demonstrating it with adding 'background color yellow', I am really trying to add `transform: scale(0.9); opacity: 0.2` - I also have no idea where to insert this, and if any tags are needed whatsoever... Thank you though! – Albert MN. Sep 24 '15 at 18:15
jQuery is quite simple to add to an existing site. Include a link in your head to the jQuery cdn. Then link a js file just like you would a style sheet. Include the provided code in your js file. All done. @iversen – Andrew Carter Sep 24 '15 at 18:17
@AdamBuchananSmith I think I kind of get it, but still not quite; Here, I have to put his jQuery in a ` – Albert MN. Sep 24 '15 at 18:28
1

@Tacticus, you're right, but jQuery opens up a world of new possibilities that *aren't* easy in plain JavaScript. Some of us like to expose that world to new developers. – isherwood Sep 24 '15 at 18:37

indubitablee · Accepted Answer · 2015-09-25T14:34:42.683

you can do this with jQuery as shown below. there's no way to do this with just css because the selectors only can see elements that are after the hovered element, and in this case, you also need before. thats why in your example, #a can affect #b but #b doesnt affect #a - because #b is after #a

$(document).ready(function() {
    $(document).on('mouseenter mouseleave', '.plane1', function() {
     $('.plane2').toggleClass('change');
    });
    $(document).on('mouseenter mouseleave', '.plane2', function() {
     $('.plane1').toggleClass('change');
    });
});

.change {
    transform: scale(0.9); 
    opacity: 0.2
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="plane1" class="plane1 col-md-6 left scale-1 trans-6 opacity-7 hover-opacity">
    <img src="img/specs.jpg" class="img-thumbnail center" width="250" height="250"/>
    <h4 class="center">That plane</h4>
</div>
<div id="plane2" class="plane2 col-md-6 left scale-1 trans-6 opacity-7 hover-opacity">
    <img src="img/specs.jpg" class="img-thumbnail center" width="250" height="250"/>
    <h4 class="center">That other plane</h4>
</div>

UPDATE FOR 3 PLANES

$(document).ready(function() {   
    $(document).on('mouseenter', '.plane1, .plane2, .plane3', function() {
        $(this).removeClass('change');
     if($(this).hasClass('plane1')) {
         $('.plane3').addClass('change');
            $('.plane2').addClass('change');
        }
        if($(this).hasClass('plane2')) {
         $('.plane3').addClass('change');
            $('.plane1').addClass('change');
        }
        if($(this).hasClass('plane3')) {
         $('.plane1').addClass('change');
            $('.plane2').addClass('change');
        }
    });
    
    $(document).on('mouseleave', '.plane1, .plane2, .plane3', function() {
        $('.plane1').removeClass('change');
        $('.plane2').removeClass('change');
        $('.plane3').removeClass('change');
    });
});

.change {
    transform: scale(0.9); 
    opacity: 0.2
}
div {
    display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="plane1" class="plane1 col-md-6 left scale-1 trans-6 opacity-7 hover-opacity">
    <img src="img/specs.jpg" class="img-thumbnail center" width="250" height="250"/>
    <h4 class="center">That plane</h4>
</div>
<div id="plane2" class="plane2 col-md-6 left scale-1 trans-6 opacity-7 hover-opacity">
    <img src="img/specs.jpg" class="img-thumbnail center" width="250" height="250"/>
    <h4 class="center">That other plane</h4>
</div>
<div id="plane3" class="plane3 col-md-6 left scale-1 trans-6 opacity-7 hover-opacity">
    <img src="img/specs.jpg" class="img-thumbnail center" width="250" height="250"/>
    <h4 class="center">That plane 3</h4>
</div>

@indubiablee I have added a third div, a "plane3", now, if I want the jQuery to affect two divs', how do I do that? :) Thank you so much for the answer too! Worked flawless! — Albert MN., Sep 25 '15 at 14:24
@iversen: yw. take a look at my update for a scenario with 3 planes — indubitablee, Sep 25 '15 at 14:35

score 1 · Answer 3 · answered Sep 24 '15 at 18:12

1

Unfortunately what you want to accomplish is not possible with pure CSS.

You would need a css selector that could select a preceding sibling, which doesn't exist (yet). See here.

You're best option would be to use javascript (preferably jQuery)

answered Sep 24 '15 at 18:12

Patrick Ziegler

787
1
7
20

score 0 · Answer 4 · answered Sep 24 '15 at 18:12

0

The :hover attribute only works on another element if it is a child of the element being hovered.

<div class="plane1">
  <div class="plane2">
  </div>
</div>

.plane1:hover > plane2 {
  somestyle
}

answered Sep 24 '15 at 18:12

Andrew Carter

109
6

score 0 · Answer 5 · answered Sep 24 '15 at 18:14

Here it is using a little javascript: https://jsfiddle.net/DIRTY_SMITH/6p5eLffv/

HTML

<div id="div1" class="normal" onmouseover="change()" onmouseout="changeBack()"></div>
<div id="div2"></div>

CSS

#div1, #div2{width: 50%; height: 200px; float: left;}
#div1{background-color: red;}
#div2{background-color: blue;}
#div2.normal{background-color: blue;}
#div2.active{background-color: green;}

javascript

function change(){
    document.getElementById("div2").className='active';
    }
function changeBack(){
    document.getElementById("div2").className='normal';
    }

Tacticus · Answer 6 · 2015-09-25T21:02:54.227

The only working CSS-only solution is to use nested, absolute positioned elements :

<div id="plane1" class="plane1 col-md-6 left scale-1 trans-6 opacity-7 hover-opacity" style="position:absolute">
    <img src="img/specs.jpg" class="img-thumbnail center" width="250" height="250">
    <h4 class="center">That plane</h4>

    <div id="plane2" class="plane2 col-md-6 left scale-1 trans-6 opacity-7 hover-opacity" style="position:absolute">
        <img src="img/specs.jpg" class="img-thumbnail center" width="250" height="250">
        <h4 class="center">That other plane</h4>
    </div>
</div>

together with following css

    #plane1:hover > #plane2 {
        /* You may add your :hover styles here */
    }

However, I would never recommend such markup but would instead suggest using JavaScript (jQuery is way too overkill for this). Please note that this markup doesn't allow easy extensibility and may only work for few divs.

Affect div by hovering other div

6 Answers6