将鼠标悬停在 div 上时如何更改文本内容答案

【问题标题】：How can I change text content inside div when hovered over将鼠标悬停在 div 上时如何更改文本内容
【发布时间】：2015-02-13 23:25:30
【问题描述】：

我有一个非常小的黑色字体的 div，当你将鼠标悬停在它上面时，div 的大小会增长到红色背景，理想情况下字体会变为白色并显示不同的文本。截至目前，我有黑色字体说“悬停我”，当你滚动它时，div 会增长，bgcolor 会变为红色，而白色字体会显示在其中。但是，黑色的 hover me 仍然在 div 中，而白色字体实际上已经在页面上，它只是随着 div 的大小变大并变为红色而变得可见，从而为白色字体提供了可以显示它的背景。

如何让我的 div 更改其字体颜色，更重要的是，当我将其悬停时更改其中的文本内容？

以下是我正在使用的代码，如果需要进一步探索，我可以将网站更新为 url

//html

     <section class="box content">
    <div id="tOne"></div>
    <div class="container">
      <h2>Title One</h2>
      <p>This is where text goes </p>
            <div class="someContent">
                <p>hover me</p>
                <p id="pWhite"><br>Lets check the overview of this content</p>
            </div>
    </div>
  </section>

//css

section.box h2 {
padding-top: 0;
margin: -7px 0;
color: #D11010;
font-family: Tahoma;
font-size: 30px;
}

section.box p {
padding-top: 0;
margin-bottom: 20px;
color: black;
font-size: 20px;
font-family: cursive;
font-weight: 300;
}

section.box p:last-child {
margin-bottom: 300px;
}

section.box.content {
padding-top: 0;
padding-left: 40px;
padding-bottom: 40px;
height: 500px;
}
.someContent {
width: 30%;
margin-left: 100px;
border: 2px solid black;
border-radius: 10px;
text-align: left;
padding: 0px;
color: black;
height: 60px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;

}

.highLight {
background: rgba(209, 16, 16, 1);
border: 2px solid black;
overflow: hidden;
color: white;
width: 80%;
height: 400px;
}

//悬停效果的jQuery

$(document).ready(function() {
$(".someContent").hover( function() {
    $(this).toggleClass("highLight");
}
, function() {
    $(this).toggleClass("highLight");
});
})

感谢您的帮助！

【问题讨论】：

CSS 和过渡可以做到这一点 codepen.io/anon/pen/gbvxVg ，这是你要找的吗？
我认为这正是我正在寻找的。当您将鼠标悬停在框上时，白色文本如何展开，但之前不可见
只有使用纯 CSS 才能实现，我想使用 jQuery hover 来练习。

标签： jquery html css text

【解决方案1】：

其实你根本不需要 jQuery 代码，你可以在 CSS 中使用 :hover 伪类。

在元素内的文本上放置一些类，以便您可以轻松地从 CSS 中定位它们：

<p class="initial">hover me</p>
<p class="hovered">Lets check the overview of this content</p>

现在您可以从开始隐藏较长的文本，并在元素悬停时隐藏初始文本并显示较长的文本：

.someContent .hovered { display: none; }
.someContent:hover .hovered { display: block; }
.someContent:hover .initial { display: none; }

代替.highLight类，使用:hover类来改变悬停时元素的外观：

.someContent:hover {
  ... the CSS from the .highLight rule
}

演示：http://jsfiddle.net/Guffa/60mtzqa4/

【讨论】：

【解决方案2】：

使用 JQuery 很容易，只需使用 .html。

$(document).ready(function() {
$(".someContent").hover( function() {
    $(this).toggleClass("highLight");
    $(this).html("Your new content here");
}
, function() {
    $(this).toggleClass("highLight");
    $(this).html("Your original content here if you want it to change back");
});
})

【讨论】：

您可以从 HTML 中删除新文本 - 只需在 HTML 中包含您的默认起始文本，然后用 jquery 替换和恢复文本。
这似乎只是破坏了悬停机制的功能，它确实将内容文本更改为“您的新内容”

【解决方案3】：

这个问题其实是关于css specificity的。

如果您添加以下 css，它将解决问题 (demo)

.highLight p:first-child {
    display: none;
}
section.box .highLight p {
    color: white;
}

【讨论】：

这似乎很好地将下一个白色带入悬停创建的 div 中，但在您将鼠标悬停到他的框之前，仍然可以在页面上查看白色文本。

【解决方案4】：

您可以执行以下操作：

<!DOCTYPE html>
    <html>
    <head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <meta charset="utf-8">
      <title>JS Bin</title>
      <style>
        .somecontent{
          color: black;
        }
        #pWhite{
          display: none;
          color: white;
          background: red;
        }
      </style>
    </head>
    <body>
     <section class="box content">
        <div id="tOne"></div>
        <div class="container">
          <h2>Title One</h2>
          <p>This is where text goes </p>
                <div class="someContent">
                    <p>hover me</p>
                    <p id="pWhite"><br>Lets check the overview of this content</p>
                </div>
        </div>
      </section>
      <script>
        $(document).ready(function(){
          $(".someContent").hover(function(){
            $(".someContent p").css("display", "none");
            $("#pWhite").css("display", "block");
          },function(){
            $(".someContent p").css("display", "block");
            $("#pWhite").css("display", "none");
            
          });
        });
          
        
      </script>
    </body>
    </html>

查看此演示：http://jsbin.com/fuqumevuqu/1/

【讨论】：