悬停时的 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 {

  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>