Hover Effect on Another Class in CSS

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!

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.

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>

CSS Transition on another class img:hover

The trick is to have the :hover pseudoclass on a parent element. When you hover the parent, you can then move one of the children.

I've reorganised your code a bit and introduced more semantic class names:

.view-more img.main {    transition: all 1s ease;    display: block;    -webkit-filter: grayscale(100%);     filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); }
.view-more:hover img.main {    -webkit-filter: grayscale(0%);    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");}.view-more {    position: relative; /* needed for child absolute positioning */    display: inline-block;    overflow: hidden;}.view-more .button {    right: 10px;    top: -80px;    position: absolute;    z-index: 100;    opacity: 0;    transition: all 1s ease;    border: 1px red solid;}.view-more:hover .button {    top: 0;    opacity: 1;}

<a href="#" class="view-more">    <img class="main" src="https://via.placeholder.com/350x150" alt="img01" width="200"/>    <img src="https://via.placeholder.com/50x50" class="button" width="50"></a>

Activate hover CSS of another class?

you can't access previous siblings with only css, so you can't make the image grow when you hover on GitHub after it, but you can put GitHub in a label and use float:right to make it appear in the right side of the image and use label:hover + img to make the image grow when you hover on the label :

.hvr-grow {  display: inline-block;  vertical-align: middle;  transform: perspective(1px) translateZ(0);  box-shadow: 0 0 1px rgba(0, 0, 0, 0);  transition-duration: 0.3s;  transition-property: transform;  width: 100px;  height: 100px;}
a label:hover+img,.hvr-grow:focus,.hvr-grow:active {  transform: scale(1.1);}
a label {  float: right;  font-size: 20px;  margin-top: 30px;}
a {  display: block;  width: 200px;  height: 100px;}

<a href="">  <label>GitHub</label>  <img class="hvr-grow" src="https://icon-icons.com/icons2/790/PNG/512/github_icon-icons.com_65450.png"></a>

How to affect other elements when one element is hovered

If the cube is directly inside the container:

#container:hover > #cube { background-color: yellow; }

If cube is next to (after containers closing tag) the container:

#container:hover + #cube { background-color: yellow; }

If the cube is somewhere inside the container:

#container:hover #cube { background-color: yellow; }

If the cube is a sibling of the container:

#container:hover ~ #cube { background-color: yellow; }

Make one class appear on another class hover

I'm afraid this is the closest you can get without javascript:

<div class="everything one">
  <div class="image">
   <img src="..." />
  </div>
  <div class="info">
    Name
    Title
    Details
  </div>
</div>

CSS:

.everything .info {
 opacity: 0;
}

.everything:hover .info {
 opacity: 1;
}

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