在悬停时更改文本，然后用原始文本替换[重复]答案

【问题标题】：On hover change text, and then replace with original text [duplicate]在悬停时更改文本，然后用原始文本替换[重复]
【发布时间】：2014-12-11 08:33:02
【问题描述】：

我的 JS 知识非常有限，但已经走到了这一步。

在 DIV 悬停时，它会根据我的意愿更改文本，但我也希望在完成悬停时它会变回来。

整天都在摆弄，但我似乎无法弄清楚。

代码如下。

<div class="involved-share">
  <p>share</p>
</div>

和脚本

$('.involved-share').hover(function() {

var $p = $(this).find('p');
var txt_old = (this.textContent || this.innerText).trim();

$p.fadeOut(300, function () {

        $p.text('with others').fadeIn();
    });


});

我想将原始文本返回到容器中。

有什么建议吗？

【问题讨论】：

检查这个答案可能是你可以用 css stackoverflow.com/questions/9913293/…

标签： javascript jquery html var

【解决方案1】：

为您提供的 JavaScript 解决方案很少，但我会在这里推荐 CSS。这很简单：

.involved-share:hover .hover,
.involved-share .hover-other {
    display: none;
}
.involved-share:hover .hover-other {
    display: block;
}

<div class="involved-share">
    <p class="hover">share</p>
    <p class="hover-other">with others</p>
</div>

使用 CSS 处理悬停效果不仅更加自然，而且更加灵活，因为如果您决定更改页面上的文本，则无需修改 javascript 代码。

【讨论】：

【解决方案2】：

也许只是 css

.involved-share:before {
  content: 'share';
}
.involved-share:hover:before {
  content: 'hover state for share';
}

<div class="involved-share">
</div>

【讨论】：

【解决方案3】：

您可以使用三元运算符来切换textContent：

$('.involved-share').on('mouseenter mouseleave', function(e) {
    var text = e.type === 'mouseleave' 
               ? 'share'
               : 'with others';

    $('p', this).stop().hide().text(text).fadeIn();
});

http://jsfiddle.net/9asoxc56/

如果页面上有多个 .involved-share 元素具有不同的 textContents，则应将原始内容和新内容存储在某处。 data-* 属性可能是一个不错的选择。

<div class="involved-share">
  <p data-original="share"
     data-nue='with others'>
       share
   </p>
</div>

JavaScript：

$('.involved-share').on('mouseenter mouseleave', function(e) {
    $('p', this).stop().hide().text(function() {
        return e.type === 'mouseleave' 
               ? $(this).data('original')
               : $(this).data('nue');
    }).fadeIn();
});

http://jsfiddle.net/3hna9o6L/

【讨论】：

【解决方案4】：

   
   $(document).ready(function(e) {
	 $('.involved').mouseenter(function(){
	 $(this).find('span').text('Mouse Enter');
	 }).mouseleave(function(){
		 $(this).find('span').text('Mouse Leave');
		 });
});

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>

<div class="involved"><span>share</span>
</div>
</body>
</html>

【讨论】：

【解决方案5】：

试试这个：为悬停结束事件再添加一个function()，并将originalText 替换为p 元素

var originalText = $('.involved-share p').text();

$('.involved-share').hover(function() {

var $p = $(this).find('p');

$p.fadeOut(300, function () {
    $(this).text('with others').fadeIn(300);
});  
}, function(){
  // set original text
  $(this).find('p').fadeOut(300,function(){
    $(this).text(originalText).fadeIn(300);
  });
});

JSFIDDLE DEMO

【讨论】：

谢谢，一切正常。但是我如何让原始文本淡入淡出？

【解决方案6】：

您可以使用仅 CSS 和 HTML 的方法来做到这一点！

HTML：

<div class="involved-share">
  <span class="default-txt">share</span>
  <span class="ommited-txt">with others</span>
</div>

CSS：

.default-txt {
    display: inline;
    opacity: 1;
    transition: opacity .3s;
}

.ommited-txt {
    display: none;
    opacity: 0;
    transition: opacity .3s;
}

.involved-share:hover .ommited-txt {
    display: inline
    opacity: 1;
}

.involved-share:hover .default-txt {
    display:none;
    opacity: 0;
}

通过这种方式，您可以维护 HTML 标记中的内容和 CSS 中的视觉行为

【讨论】：