悬停时的SVG：悬停时的图像SVG图标不起作用[重复]

Question

此问题已经在这里有了答案：

How to affect other elements when one element is hovered（6个答案）

[<7天前关闭。

我正在完成一项任务。悬停SVG图标不起作用时在图像上显示。我被卡在不正确的地方。请任何可以帮助获得此信息的人。并指出正确的方向提供的链接我已编码为codepen在此先感谢。

.image-box {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}
.fuss-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  display: block;
}
.fuss-icon { position: relative; }
 .fuss-icon {
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translatey(-30px);
/*     display: none; */
}
.fuss-img img:hover object {
display: block;
}

<div class="image-box">
  <div class="fuss-img">
    <a href="#">
    <img src="https://i.ibb.co/xGz75Q3/pim-chu-294493-unsplash.jpg">
    </a>
    </div>
  <div class="fuss-icon">
    <object>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50pt" height="50pt" viewBox="0 0 50 50"><g id="surface24150293"><path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 25 2 C 12.308594 2 2 12.308594 2 25 C 2 37.691406 12.308594 48 25 48 C 37.691406 48 48 37.691406 48 25 C 48 12.308594 37.691406 2 25 2 Z M 25 4 C 36.609375 4 46 13.390625 46 25 C 46 36.609375 36.609375 46 25 46 C 13.390625 46 4 36.609375 4 25 C 4 13.390625 13.390625 4 25 4 Z M 18 13.25 L 18 36.75 L 19.5 35.875 L 36.5 25.875 L 37.96875 25 L 36.5 24.125 L 19.5 14.125 Z M 20 16.75 L 34 25 L 20 33.25 Z M 20 16.75 "></path></g></svg></object>
  </div>
</div>

Answer 1

请尝试这个

jsfiddle link

.image-box {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.fuss-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

.fuss-icon {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
  transition: opacity;
  transition-duration: 400ms;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
}

.fuss-icon object {
  position: absolute;
  top: 50%;
  left: 40%;
  margin-top: -25pt;
}

.fuss-img a:hover .fuss-icon {
  opacity: 1;
}

<div class="image-box">
  <div class="fuss-img">
    <a href="#">
      <img src="https://i.ibb.co/xGz75Q3/pim-chu-294493-unsplash.jpg">
      <span class="fuss-icon">
        <object>
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50pt" height="50pt" viewBox="0 0 50 50">
            <g id="surface24150293">
              <path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 25 2 C 12.308594 2 2 12.308594 2 25 C 2 37.691406 12.308594 48 25 48 C 37.691406 48 48 37.691406 48 25 C 48 12.308594 37.691406 2 25 2 Z M 25 4 C 36.609375 4 46 13.390625 46 25 C 46 36.609375 36.609375 46 25 46 C 13.390625 46 4 36.609375 4 25 C 4 13.390625 13.390625 4 25 4 Z M 18 13.25 L 18 36.75 L 19.5 35.875 L 36.5 25.875 L 37.96875 25 L 36.5 24.125 L 19.5 14.125 Z M 20 16.75 L 34 25 L 20 33.25 Z M 20 16.75 "></path>
            </g>
          </svg></object>
      </span>
    </a>
  </div>
</div>