Question

当我将鼠标悬停在按钮上时，我想更改图像，但是当我将鼠标悬停在＆＃34;分隔符＆＃34;时，它可能不会改变。在下面的jsfiddle中。

我不想使用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

您可以使用pointer-events属性。

将none应用于包装器。

然后将auto应用于img和a。

注意：根据caniuse pointer-events提供了很好的支持，但是你应该注意这一行：

除非将display设置为block，否则对IE11和Edge中的链接不起作用或内联块。

您可能需要根据需要进行一些调整。

Fiddle

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

修改

正如Bram Vanroy在评论中指出的那样，没有img标记的src将无法验证。要使用background-image属性，应使用替代元素而不是img。

将鼠标悬停在分隔符

1 个答案: