CSS: Show Style on Hover Over Multiple Divs Placed One Over Another

CSS: Hover one element, effect for multiple elements?

You don't need JavaScript for this.

Some CSS would do it. Here is an example:

<html>  <style type="text/css">    .section { background:#ccc; }    .layer { background:#ddd; }    .section:hover img { border:2px solid #333; }    .section:hover .layer { border:2px solid #F90; }  </style></head><body>  <div class="section">    <img src="myImage.jpg" />    <div class="layer">Lorem Ipsum</div>  </div></body></html>

change multiple div style when Hover on another Div using CSS

@Marc Audet: The first sentence describes preciously what isn't working. When hovering the second div, the first div doesn't fade.

The problem is that you what to select the previous sibling. Looking at this link, I think you can't fix it this way.

You could however fix it with JQuery
HTML:

<div  class="mainBox">
<div class="mask portfolio_box_skin_2">
<div class="portfolio_image_skin2">
Content1
</div>
<div class="cleardiv"></div>    
</div></div>

<div  class="mainBox">
<div class="mask portfolio_box_skin_2">
<div class="portfolio_image_skin2">
Content2
</div>
<div class="cleardiv"></div>    
</div></div>

<div  class="mainBox">
<div class="mask portfolio_box_skin_2">
<div class="portfolio_image_skin2">
Content3
</div>
<div class="cleardiv"></div>    
</div></div>

<div  class="mainBox">
<div class="mask portfolio_box_skin_2">
<div class="portfolio_image_skin2">
Content4
</div>
<div class="cleardiv"></div>    
</div></div>

CSS:

.mainBox
{
    width:100px;
    height:100px;
    float:left;
}
.portfolio_image_skin2
{
    width:100px;
    height:100px;
    margin-right:10px;
}
.mask
{
    opacity:1;
    background-color:#0CF;
}
.maskHover
{
    /* CSS */
    display:block!important;    
    opacity:0.5;
    transition: 0.5s all;
    padding-right:19px;     
}

JQUERY:

$(".mainBox").hover(function(){
    $( ".mainBox" ).each(function() {
        $(this).children(".mask").toggleClass('maskHover');
    });
    $(this).children(".mask").removeClass('maskHover');
});

Check JSFiddle

change multiple div style when Hover on another Div using CSS

I'd suggest the following:

#main:hover + #box,
#main:hover ~ #box1 {
    /* CSS */
}

JS Fiddle demo.

The problems you had, originally, were the two selectors:

#main:hover + #box,
#box1 {
    background-color: green;
}

The first of which worked, unfortunately the comma separates entire selectors, it doesn't give a comma-separated list of descendants/siblings to be affected. So the #box1 was always background-colored, rather than just on :hover of #main.

The combinators I've used are the adjacent-sibling combinator (+) and the general-sibling combinator (~), the latter of which will affect any later sibling of #main that has the given id of box1.

The second rule, written with ~ could be rewritten by specifying the exact sequence of elements using multiple (in this case two) adjacent-sibling combinators, to give:

#main:hover + #box,
#main:hover + #box + #box1 {
    /* CSS */
}

But this does become increasingly fragile over time, and maintenance becomes more trying when the HTML structure changes, or new elements are inserted between the relevant elements.

References:

CSS Selectors.

On a CSS hover event, can I change another div's styling?

Yes, you can do that, but only if #b is after #a in the HTML.

If #b comes immediately after #a: http://jsfiddle.net/u7tYE/

#a:hover + #b {
    background: #ccc
}

<div id="a">Div A</div>
<div id="b">Div B</div>

That's using the adjacent sibling combinator (+).

If there are other elements between #a and #b, you can use this: http://jsfiddle.net/u7tYE/1/

#a:hover ~ #b {
    background: #ccc
}

<div id="a">Div A</div>
<div>random other elements</div>
<div>random other elements</div>
<div>random other elements</div>
<div id="b">Div B</div>

That's using the general sibling combinator (~).

Both + and ~ work in all modern browsers and IE7+

If #b is a descendant of #a, you can simply use #a:hover #b.

ALTERNATIVE: You can use pure CSS to do this by positioning the second element before the first. The first div is first in markup, but positioned to the right or below the second. It will work as if it were a previous sibling.

Apply the hover state to multiple divs when another div is hovered over

I would recommend using css class instead of :hover. This will allow you to set the class attribute on mouseover and on mouse out. JS Fiddle Example

$('#hovered_div').mouseover(
  function () {
      $('#div1').attr('class','hover');
      $('#div2').attr('class','hover');
      $('#div3').attr('class','hover');
  });

$('#hovered_div').mouseout(function() {
 $('#div1').attr('class','');
    $('#div2').attr('class','');
      $('#div3').attr('class','');

});

You must change your css to the following (change ':hover' to '.hover')

#div1.hover {
 background-color:green;
width:75px;    
}

Revised way of doing the same

$("#hovered_div").mouseover(function() {
    $('#div1').attr('class', 'hover');
    $('#div2').attr('class', 'hover');
    $('#div3').attr('class', 'hover');
}).mouseout(function() {
    $('#div1').removeClass('hover');
    $('#div2').removeClass('hover');    
    $('#div3').removeClass('hover');

});

CSS hover - can it effect multiple divs with same class name

One (plain/vanilla) JavaScript approach that works (in compliant browsers, which support [].forEach(), and document.querySelectorAll()), given that CSS cannot (yet) perform this task, is:

function classToggle (evt, find, toggle) {
    [].forEach.call(document.querySelectorAll('.' + find), function(a){
        a.classList[evt.type === 'mouseover' ? 'add' : 'remove'](toggle);
    });
}

var els = document.querySelectorAll('.test');

for (var i = 0, len = els.length; i<len; i++){
    els[i].addEventListener('mouseover', function(e){
        classToggle(e, 'test', 'highlight');
    });
    els[i].addEventListener('mouseout', function(e){
        classToggle(e, 'test', 'highlight');
    });
}

JS Fiddle demo.

References:

Array.prototype.forEach().
document.querySelectorAll().
Element.classList.
Function.prototype.call().

Using only CSS, show div on hover over another element

You can do something like this:

div {    display: none;}    a:hover + div {    display: block;}

<a>Hover over me!</a><div>Stuff shown on hover</div>

Hover over one element shows div, and show second second div while hovering over it

Try to bind hover event for #element also. That will fix the issue that you are facing. And use .stop() to clear the on going animation queue.

 $("#liOffices,#element").hover(   function() {     $("#element").stop().fadeIn(20, function() {       $("#element").addClass("visible1");       $("#element").removeClass("second");     });

   }, function() {     $("#element").stop().fadeOut(2000, function() {       $("#element").removeClass("visible1");       $("#element").addClass("second");     });   } );

.first {  position: absolute;  width: 100px;  height: 100px;  background-color: #36F;}.second {  position: absolute;  margin-left: 150px;  width: 100px;  height: 100px;  background-color: #3C6;  display: none;}.visible1 {  position: absolute;  margin-left: 150px;  width: 100px;  height: 100px;  background-color: #3C6;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="liOffices" class="first"></div>

<div id="element" class="second"></div>

CSS: Show Style on Hover Over Multiple Divs Placed One Over Another

CSS: Hover one element, effect for multiple elements?

change multiple div style when Hover on another Div using CSS

change multiple div style when Hover on another Div using CSS

On a CSS hover event, can I change another div's styling?

Apply the hover state to multiple divs when another div is hovered over

CSS hover - can it effect multiple divs with same class name

Using only CSS, show div on hover over another element

Hover over one element shows div, and show second second div while hovering over it

Related Topics

Leave a reply