我想在悬停时更改框中的文本

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悬停

Answer 3

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

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;
}