Hovering different divs in css

Question

I am trying to apply some hover effect to a image inside a div. Something like this in html

<div class="hey">
 <img src="./img/pic.png">
</div>

At css i tried something like

.img:hover { some css code goes here}

this works fine. But what if i want to apply those changes not to whole img tags but only to "hey" class? Is it okay to do something like this?

.hey[img:hover] { some css code... i think this does not work}

if images is children of .hey div use this: `.hey > img:hover { ... }` — Sherali Turdiyev, Oct 08 '15 at 05:47

PedersenIT · Answer 1 · 2015-10-07T23:00:43.003

0

I would use the hover on the div.

.hey:hover{
}
.hey:hover img{
}

edited Oct 07 '15 at 23:00

answered Oct 07 '15 at 22:49

PedersenIT

You're right, Sorry, I've done it before, just can't find which project i did it on. I'll keep looking. – PedersenIT Oct 07 '15 at 23:00
Take a look at Shawns answer Here: http://stackoverflow.com/questions/676324/div-background-color-to-change-onhover Depending on what you need, it could work. He is suggesting filling the Div with the element you are hovering., but if the Image doesn't fill your div, then it doesn't help you. – PedersenIT Oct 07 '15 at 23:01
Thanks mate! I've done it too, but i can't remember how i did it. I think it's an easy fix! – Oct 07 '15 at 23:02
Yeah, I remember it being something simple. – PedersenIT Oct 07 '15 at 23:03
Were you able to identify why it wasn't working earlier? – PedersenIT Oct 08 '15 at 14:13

score 0 · Answer 2 · answered Oct 07 '15 at 23:11

0

Did you tried this?

.hey .img:hover{
  some css code
}

answered Oct 07 '15 at 23:11

marisaroque

score 0 · Answer 3 · answered Oct 07 '15 at 23:13

0

I would try .hey:hover { css code }

answered Oct 07 '15 at 23:13

Dabble

score 0 · Answer 4 · edited Oct 08 '15 at 04:58

0

I tried this

.hey:hover img{ some css code }

and it worked for me :)

edited Oct 08 '15 at 04:58

answered Oct 07 '15 at 23:19

score -1 · Answer 5 · answered Oct 07 '15 at 23:10

-1

Found a link with an example

<div class="hey">
 <img class='img' src="./img/pic.png">
</div>

.img ~ .hey{

}

answered Oct 07 '15 at 23:10

PedersenIT

1

`~` is a [sibling selector](https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors). Currently, [there is no parent selector](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector). Based on the [answer the OP posted](http://stackoverflow.com/questions/33003658/hovering-diferent-divs-in-css#answer-33004049), I think your deleted answer is more helpful. – showdev Oct 08 '15 at 00:45
This answer uses a sibling selector but there are no siblings, so I don't understand how it could be correct. The jsFiddle demonstrates something different. – Maximillian Laumeister Oct 08 '15 at 04:57
I see that he found success with my deleted answer. I'd love to know why it wasn't working. – PedersenIT Oct 08 '15 at 14:13

5 Answers5