Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS selector for an img element with class [duplicate]

Tags:

html

css

I have

<a href="/">
  <img class="myClass" src="someImg.jpg" />
</a>

I tried to apply hover effect on image using:

img .myClass:hover {
  opacity: 1;
}

Why doesn't it work?

like image 567
user1765862 Avatar asked Nov 21 '15 21:11

user1765862


1 Answers

The selector img .myClass will select an element with a class of myClass that is a descendant of an img element. But since img elements can't contain descendant elements, that doesn't make sense.

You want to select an img element with a class of myClass, therefore you need to remove the space:

img.myClass:hover {
  opacity:1;
}

div {
  border: 1px solid;
  display: inline-block;
}
img {
  opacity: 0;
  transition: 200ms ease-in;
  vertical-align: top;
}
img.myClass:hover {
  opacity: 1;
}
<div>
  <img class="myClass" src="//placehold.it/200" />
</div>
like image 117
Josh Crozier Avatar answered Nov 14 '22 21:11

Josh Crozier