悬停在分隔符上时取消悬停

Question

I want to change the image when I hover on the button, but it may not change when I hover on "separator" in the jsfiddle below.

I don't want to use js

html:

<div id="my-thumbnail-link" class="vcenter-parent">
    <img class="vcenter-child">

SEPERATOR

    <a href="#potato" class="vcenter-child">Some Link</a>
</div>

CSS:

.vcenter-parent {
  display: flex;
  justify-content: center;
}
.vcenter-child {
  align-self: center;
}

#my-thumbnail-link {
}
#my-thumbnail-link img { /* Select all img tag inside div */
  background: url("img") no-repeat;
  width: 32px;
  height: 32px;
}
#my-thumbnail-link:hover img { /* Select all img tag inside div when it is hovered */
  background: url("img1") no-repeat;
}
#my-thumbnail-link a { /* Select all a tag inside div */
  color: gray;
}
#my-thumbnail-link:hover a { /* Select all a tag inside div when it is hovered */
  color: blue;
  font-weight: bold;
}

https://jsfiddle.net/srerd881/

Answer 1

You could use the pointer-events property.

Apply none to the wrapper.

Then apply auto to the img and the a .

Note: According to caniuse pointer-events has good support, however you should note this line:

Does not work on links in IE11 and Edge unless display is set to block or inline-block.

You may need to make some adjustments depending on your needs.

Fiddle

 .vcenter-parent { display: flex; justify-content: center; } .vcenter-child { align-self: center; } #my-thumbnail-link img { /* Select all img tag inside div */ background: url("https://unsplash.it/40") no-repeat; width: 32px; height: 32px; } #my-thumbnail-link:hover img { /* Select all img tag inside div when it is hovered */ background: url("https://unsplash.it/50") no-repeat; } #my-thumbnail-link a { /* Select all a tag inside div */ color: gray; } #my-thumbnail-link:hover a { /* Select all a tag inside div when it is hovered */ color: blue; font-weight: bold; } #my-thumbnail-link { pointer-events: none; } #my-thumbnail-link img, #my-thumbnail-link a { pointer-events: auto; } 

 <div id="my-thumbnail-link" class="vcenter-parent"> <img class="vcenter-child"> SEPERATOR <a href="#potato" class="vcenter-child">Some Link</a> </div> 

EDIT

As pointed out by Bram Vanroy in comments, an img with no src tag will not validate. To use the background-image property, an alternative element should be used instead of img .