4

当有人将鼠标悬停在文本上时，我希望文本完全改变。我在网上找到了应该可以工作的代码，但它没有。有什么建议么？

<span class="show">
     <p>if {&nbsp;<br /></p>
     <p>yourSite < awesome;&nbsp;<br /></p>
     <p>solution = aislingDouglas (HTML5 + CSS3 +&nbsp;<br /></p>
     <p>JavaScript + PHP);&nbsp;<br /></p>
     <p>}&nbsp;<br /></p>
     <p>else {&nbsp;<br /></p>
     <p>solution = null;&nbsp;<br /></p>
     <p>}&nbsp;</p>
 </span>

 <span class="noshow">
     <p>Need a website? &nbsp;<br /></p>
     <p>You found your dream developer!&nbsp;<br /></p>
     <p>And hey - I already helped you on the web,&nbsp;<br /></p>
     <p>why not let me help you&nbsp;<br /></p>
     <p>build an amazing site!&nbsp;<br /></p>
 </span>

这是CSS：

.noshow, p:hover .show { display: none }
p:hover .noshow { display: inline }

我不反对使用 JavaScript（欢迎提出编码建议），但我更希望它保留在 CSS 中。

提前致谢！

4

2 回答 2

5

你有正确的想法，有点...

目标是拥有一个包含两个文本部分的容器元素。
当该元素被鼠标悬停时，它被分配为 pseudoclass :hover。使用此选择器，您可以适当地重新设置子项（下方.first和.second）的样式。

请注意，我已经使用<span>了文本和<p>下面的父级，但是如果您想使用块级子级（如更多<p>元素）来执行此操作，那么您应该使用<div>作为父级。

http://jsfiddle.net/G28qz/

HTML：

<p class="hovertext">
    <span class="first">This is what you see first</span>
    <span class="second">But this shows up on mousehover</span>
</p>

CSS：

/* Hide the second piece of text by default */
p.hovertext .second {
     display:none;
}

/* Hide the first piece of text on hover */
p.hovertext:hover .first {
     display:none;
}

/* Re-show the second piece of text on hover */
p.hovertext:hover .second {
    display:inline;
}
于 2013-04-19T02:49:24.933 回答
4

我想你想要这样的东西：

<div class="wrap">
    <div class="show">
        <p>if {&nbsp;</p>
        <p>yourSite
            < awesome;&nbsp; </p>
                <p>solution = aislingDouglas (HTML5 + CSS3 +&nbsp;</p>
                <p>JavaScript + PHP);&nbsp;</p>
                <p>}&nbsp;</p>
                <p>else {&nbsp;</p>
                <p>solution = null;&nbsp;</p>
                <p>}&nbsp;</p>
    </div>
    <div class="noshow">
        <p>Need a website? &nbsp;</p>
        <p>You found your dream developer!&nbsp;</p>
        <p>And hey - I already helped you on the web,&nbsp;</p>
        <p>why not let me help you&nbsp;</p>
        <p>build an amazing site!&nbsp;</p>
    </div>
</div>

使用以下 CSS：

.wrap {
    outline: 1px dotted blue;
    height: 300px;
}
.noshow, .wrap:hover .show {
    display: none
}
.wrap:hover .noshow {
    display: block
}

您需要一个外部容器来包装将打开和关闭的两个块。

为了获得最佳效果，请为外包装设置一个高度，否则您可以获得摆动的显示/隐藏效果，因为面板会由于文本数量的不同而自行调整大小，这意味着鼠标可能不会在面板上被显示，因此悬停状态将立即恢复为非悬停，从而重新触发显示/隐藏效果。

小提琴：http: //jsfiddle.net/audetwebdesign/zAt7f/

于 2013-04-19T02:56:38.713 回答