悬停时的 SVG：悬停时的图像 SVG 图标不起作用

Question

我正在做一项任务。当悬停 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 链接.image-box {&nbsp; position: relative;&nbsp; width: 100%;&nbsp; max-width: 400px;&nbsp; margin: 0 auto;}.fuss-img img {&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; object-fit: cover;&nbsp; display: block;&nbsp; border-radius: 4px;}.fuss-icon {&nbsp; top: 0;&nbsp; left: 0;&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; position: absolute;&nbsp; opacity: 0;&nbsp; transition: opacity;&nbsp; transition-duration: 400ms;&nbsp; background: rgba(0, 0, 0, 0.5);&nbsp; border-radius: 4px;}.fuss-icon object {&nbsp; position: absolute;&nbsp; top: 50%;&nbsp; left: 40%;&nbsp; margin-top: -25pt;}.fuss-img a:hover .fuss-icon {&nbsp; opacity: 1;}<div class="image-box">&nbsp; <div class="fuss-img">&nbsp; &nbsp; <a href="#">&nbsp; &nbsp; &nbsp; <img src="https://i.ibb.co/xGz75Q3/pim-chu-294493-unsplash.jpg">&nbsp; &nbsp; &nbsp; <span class="fuss-icon">&nbsp; &nbsp; &nbsp; &nbsp; <object>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <g id="surface24150293">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </g>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </svg></object>&nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; </a>&nbsp; </div></div>