html - 如何使用 CSS 和悬停替换文本？

Question

我知道似乎有很多这样的问题，但它们似乎都做了一些与我所知道的略有不同的事情。大多数只是添加文本。我已经有一些 CSS 可以做到这一点，我想做的是修改我必须有的文本已经被替换了。我似乎无法全神贯注/无法在不破坏其他东西的情况下建立正确的连接来使其工作。

现在，如果将鼠标悬停在图片上，整个图片会部分变白并显示文字。这正是我需要的。我想不通的是如何添加之前存在并在之后消失的文本。

我看到了这个 fiddle :http://jsfiddle.net/d64A9/但我不知道如何应用它(如果它是正确的做法)。

这是我得到的:

CSS

.pic2 {  
    height: 125px; 
    background: url(http://somewebsite/somepic.jpg) no-repeat; 
    background-size: 100%;
    overflow:hidden;
} 

.text2 {  
    height: 125px;
    background: #FFF;
    opacity: 0;
} 

h1 {
  font-weight: bold;
  color: #000;
  font-size: 42px;
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  text-align: center;
}

.pic2:hover .text2 { 
    opacity: 0.6; 
    text-align: center; 
    color: #000000; 
    font-size: 20px; 
    font-weight: 700; 
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; 
    padding: 30px; 
}

HTML

<a href="http://somewebsite/page" style="text-decoration: none;">
    <div class="pic2">
        <div class="text2"> 
            <h1>Private</h1>
            <br />
            Personal information and requirements are kept completely confidential.
        </div> 
    </div> 
</a>

Answer 1

在您发布的 fiddle 中，通过将其字体大小设置为 0 使原始文本不可见，并且内容从 html 数据属性加载到伪元素中。两者都发生在悬停时。看看评论:

span:hover{
  font-size: 0; /* set the font size to 0 to make the original text invisible */
}

span:hover:before{ /* create pseudo element */
  font-size: initial; /* don't apply font-size: 0 here*/
  content: attr(data-hovertext); /* get the data-attribute value */
}

要应用它，您需要将数据属性添加到标记中:

<span data-hovertext="This text will replace the other text">Personal information and requirements are kept completely confidential.</span>

参见 https://developer.mozilla.org/en/docs/Web/CSS/::after更多 :)