Question

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

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

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

// 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");
});
})

感谢您的帮助！

Answer 1

使用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");
});
})

Answer 2

此问题实际上是关于css specificity。

如果你添加以下css，它将解决问题（demo）

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

Answer 3

你实际上根本不需要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/

Answer 4

您可以执行以下操作：

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.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/

如何在悬停时更改div内的文本内容

4 个答案: