Question

我创建了一个框，我希望h3标记悬停时文本会改变吗？实现这一目标的最简单方法是什么？

这是我的HTML：

<h3>Hover me to find out more</h3>

<div id="next-text">Here is where you find out more.</div>

这是我的css：

 h3 {
        border: 3px solid hsl(288, 49%, 29%);
        border-radius: 20px;
        line-height: 40px;
        padding: 52px;
        text-align: center;
        width: 19%;
        float: left;
        margin-left: 15px;
        height: 305px;
    }

此外，我还有多个h3标签和div。

Answer 1

悬停事件有两个函数mouseenter和mouseleave

$( "h3" ).hover(
  function() {
    $( this ).text( "changed text" );
  }, function() {
    $( this ).text( "Hover me to find out more" );
  }
);

Answer 2

您可以尝试这样：

var oldtext = null;
$("h3").hover(
    function() {
      oldtext = $(this).text();
      $(this).text("changed text");
    }, function() {
       $(this).text(oldtext);
    }
);

请参阅此jquery hover

Answer 3

您可以像这样https://jsfiddle.net/2Lzo9vfc/184/

使用JQuery

<强> JS

$('h3').hover(
    function() {
        var $this = $(this); 
        $this.data('originalText', $this.text());
        $this.text("Hover text");
    },
    function() {
        var $this = $(this); 
        $this.text($this.data('originalText'));
    }
);

<强> HTML

<h3>Hover me to find out more</h3>

Answer 4

尝试使用jquery：

$('h3').mouseenter(function(){
    $(this).next('div').html('changed text');
})

如果您想在鼠标离开时获取原始文本，请执行以下操作。

var previous='';    
$('h3').mouseenter(function() {
        previous=$(this).next('div').html();
        $(this).next('div').html('changed text');
  })
  .mouseleave(function() {
        $(this).next('div').html(previous);
  });

Answer 5

试试这段代码：

$( "h3" ).hover(function() {
    $( this ).text("new text");
  });

Answer 6

如果您希望更改文本内容，请使用其他答案之一（最好是@WisdmLabs）：

$( "h3" ).hover(
  function() {
    $( this ).text( "changed text" );
  }, function() {
    $( this ).text( "Hover me to find out more" );
  }
);

如果您希望样式更改，请在您的CSS中添加h3:hover。

Answer 7

如果你想使用css，那就试试这个：

html:
<h3><span>Hello!</span></h3>

css:
h3:hover span {display:none}
h3:hover:before {content:"Reply!"}

或使用JS然后尝试此https://jsfiddle.net/2Lzo9vfc/184/

Answer 8

div.project h1, div.project h3, div.project p {
    opacity: 0;
    transition: 0.8s;   
}
div.project:hover h1, div.project:hover h3, div.project:hover p {
    opacity: 1;
}

我希望在它悬停时更改框中的文本

8 个答案: