Question

我想做的是反转此代码，因此我不想将鼠标悬停在文本上以显示图像，而是将鼠标悬停在图像上以显示文本。我不确定如何执行此操作，因为我尝试了切换“缓入和缓出”功能，但这没用。

svg{
  background:url('https://vignette.wikia.nocookie.net/lunifer-kingdom/images/f/fb/Wolf_howling_at_moon.jpg/revision/latest?cb=20140105045552');
  background-size:cover;
  width:40vmin; height:auto;
  display:block;
}

h5 {
  height: auto;
  width: 370px;  
  font-size: 15px;
  padding: 10px;
  color: black;
  margin-top: -395px;
}

text {
  font-size:10px;
  transition:font-size .4s ease-out;
  font-weight:900;
  font-family:arial;
}

.texts {
  font-size:12px;
  font-family:arial;
  margin: 30px 0px 0px 0px;
}

svg:hover text{
  transition:font-size .4s ease-in;
  font-size: 600px;
}

<svg viewbox="0 0 50 50" width="50" height="50">
  <defs>
    <mask id="mask" x="0" y="0" width="100" height="49">
      <rect x="0.5" y="0.5" width="49" height="49" fill="#fff"/>
      <text x="18" text-anchor="middle" y="50" dy="0">D</text>
      <text x="23" id="ltrV" text-anchor="middle" y="50" dy="0">A</text>
      <text x="28" text-anchor="middle" y="50" dy="0">R</text>
      <text x="33" text-anchor="middle" y="50" dy="0">K</text>
    </mask>
  </defs>
  <rect x="0.5" y="0.5" width="49" height="49" mask="url(#mask)" fill-opacity="1" fill="#C0C0C0"/>
<h5>text here</h5>
</svg>
</div>

Answer 1

只需在正常状态和悬停状态之间切换font-size值：

svg{
  background:url('https://vignette.wikia.nocookie.net/lunifer-kingdom/images/f/fb/Wolf_howling_at_moon.jpg/revision/latest?cb=20140105045552');
  background-size:cover;
  width:40vmin; height:auto;
  display:block;
}

h5 {
  height: auto;
  width: 370px;  
  font-size: 15px;
  padding: 10px;
  color: black;
  margin-top: -395px;
}

text {
  font-size:600px;
  transition:font-size .4s ease-out;
  font-weight:900;
  font-family:arial;
}

.texts {
  font-size:12px;
  font-family:arial;
  margin: 30px 0px 0px 0px;
}

svg:hover text{
  transition:font-size .4s ease-in;
  font-size: 10px;
}

<svg viewbox="0 0 50 50" width="50" height="50">
  <defs>
    <mask id="mask" x="0" y="0" width="100" height="49">
      <rect x="0.5" y="0.5" width="49" height="49" fill="#fff"/>
      <text x="18" text-anchor="middle" y="50" dy="0">D</text>
      <text x="23" id="ltrV" text-anchor="middle" y="50" dy="0">A</text>
      <text x="28" text-anchor="middle" y="50" dy="0">R</text>
      <text x="33" text-anchor="middle" y="50" dy="0">K</text>
    </mask>
  </defs>
  <rect x="0.5" y="0.5" width="49" height="49" mask="url(#mask)" fill-opacity="1" fill="#C0C0C0"/>
<h5>text here</h5>
</svg>

Answer 2

您想触发哪个元素？ SVG文字还是H5？如果是H5。看看是否可以重新排列元素

<h5/><svg/>

比在CSS中使用以下选择器（请注意，仅某些浏览器支持+选择器）https://www.w3schools.com/cssref/css_selectors.asp

h5:hover + svg 要么 h5:hover + svg text

悬停时将文本从图像中显示出来反转

2 个答案: