Question

我的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();
    });


});

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

有什么建议吗？

Answer 1

您提供了一些JavaScript解决方案，但我会在这里推荐CSS。它将如此简单：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

也许只是css

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

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

Answer 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/

Answer 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>

Answer 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

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

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

在悬停更改文本，然后替换为原始文本

6 个答案: