Use :Hover to Modify the CSS of Another Class

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.

Use :hover to modify the css of another class?

It's not possible in CSS at the moment, unless you want to select a child or sibling element (trivial and described in other answers here).

For all other cases you'll need JavaScript. jQuery and frameworks like Angular can tackle this problem with relative ease.

[Edit]

With the new CSS (4) selector :has() guide from CSS4.Rocks (archived by Wayback Machine) and :has() guide from MDN Web Docs, you'll be able to target parent elements/classes, making a CSS-Only solution viable in the near future!

CSS hover modify self and other class

First, you need to fix the selector .footer_status_tex: hover, remove the gap after :.

Second, the selector .footer_status_tex:hover .footer_status_gear only works if the latter one is a child of the former one.

What you need is .footer_status_tex:hover + .footer_status_gear or ~ if the latter one is a sibling of the former one, also the latter one must be placed next to the former one in the DOM.

.footer_status_tex:hover {

  color: #81aaf3;

}

.footer_status_tex:hover + .footer_status_gear {

  background-color: #aba51e;

  height: 20px;

}

<div class="footer_status_tex">Hello</div>

<div class="footer_status_gear"></div>

Use :hover, :focus to change another css outside the hovered class

Since you can't select parent elements inside CSS (wait for possible CSSv4 solution), use JS for that. On hover add class to parent element

$(document).ready(function () {
  $('.flex-align i').hover(
    function () {
      $(this).closest('.parent-wrapper').addClass('hover');
    },
    function () {
      $(this).closest('.parent-wrapper').removeClass('hover');
    }
  )
});

.flex-align {
    display: flex;
    justify-content: start;
    align-items: center;
}

.nav-dropdown {
    display: none !important;
    width: auto !important;
}
.hover .nav-dropdown {
    display: block !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="parent-wrapper">
  <div class="flex-align">
      <i class="fa fa-arrow-right dropdown-icon"></i>
      <p>Main test</p>
  </div>
  <ul class="nav-dropdown">
      <li><a href="#">test 1</a></li>
      <li><a href="#">test 2</a></li>
      <li><a href="#">test 3</a></li>
  </ul>
</div>

Load a css class on hover

Your stylesheet code looks like SCSS that will need to be compiled to CSS to have the effect you want. Here is an example below using plain HTML and CSS and a placeholder image.

Note: I am totally unfamiliar with React. From what I gather, className will be rendered as the class attribute, and the img source {Honesty} will be converted to a string.

.trait_box {

    width: 220px;

    height: 240px;

    display: inline-block;

    background-color: white;

    margin-right: 35px;

    cursor: pointer;

}

.trait_box:hover .block__body {

    position:absolute;

    top:0;

    background:#2980b9;

    color:#fff;

    height:100%;

    transition: top .5s;

}

.trait_box:hover .block__body h3 {

    color: #fff;

}

<div class="trait_box polaroid">

           <div class="trait_description_div">

                <span className="trait_description">Honesty</span>

           </div>

           <div class="trait_img_div">

                <img src="http://lorempixel.com/400/200/sports/" className="trait_img"/>

           </div>

           <div class="block__body">

                <h3>Card Title</h3>

           </div>

       </div>

Hover over class and modify another class

Other commenters are correct, you can't change the parent from the child. But you can make the parent adapt to the child and just modify the child width.

  grid-template-columns: auto auto;

Snippet here based on your code: https://codepen.io/29b6/pen/wvypzGq

---

Related Topics