悬停时显示标题属性，不悬停时恢复为原始文本

Question

当我将鼠标悬停在任何一个“新文本”div 上时，我想用悬停在其上的 div 的标题属性替换我的第一个 div 中的文本，然后在不再悬停时恢复为原始文本。我不认为这可以用 CSS 来完成。原始文本和标题是动态变量，会根据您所在的页面而变化，因此任何解决方案都不需要在其中包含硬编码值。<div class='changing-text'>Original text</div><div class='new-text' title='New text 1'>Div 1</div><div class='new-text' title='New text 2'>Div 2</div>

Answer 1

你可以这样做：

这会在我们更改文本之前保存 hoved 元素的原始文本，当您离开/悬停时，我们会再次插入原始文本。

var original ="";

$('.new-text').hover(

  function() {

    original = $(this).text();

    $(this).text($(this).attr("title"));

  }, function() {

    $(this).text(original);

  }

);

演示

var original ="";

$('.new-text').hover(

  function() {

    original = $('.changing-text').text();

    $('.changing-text').text($(this).attr("title"));

  }, function() {

    $('.changing-text').text(original);

  }

);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='changing-text'>Original text</div>

<div class='new-text' title='New text 1'>Div 1</div>

<div class='new-text' title='New text 2'>Div 2</div>

Answer 2

你好，这是我的代码简单修复

$(".new-text").mouseenter(function() {

     var title = $(this).attr('title');

     var orignal = $('.changing-text').text();

     $(this).attr('data-orignal',orignal);

     $('.changing-text').text(title);

    }).mouseleave(function() {

     var orgnl =  $(this).attr('data-orignal');

     $('.changing-text').text(orgnl);

         

    });

.container div {

    display: inline-flex;

}

 .new-text {

    display: block;

    margin: 15px;

cursor: pointer;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='changing-text'>Original text</div>

<div class="container">

  <div class='new-text' title='New text 1'>Div 1</div>

  <div class='new-text' title='New text 2'>Div 2</div>

  

</div>

Answer 3

如果我没猜错，那就试试这个吧。

是的，您认为正确，只有css您必须使用jQuery它是不可能的。试试这个解决方案。

jQuery(document).ready(function(){

    var changing_text = jQuery('.changing-text').text();

    

    jQuery('.new-text').hover(function(){ 

        var title_value = jQuery(this).attr("title");

        jQuery('.changing-text').text(title_value);

    }, function(){ 

       jQuery('.changing-text').text(changing_text);

    }); 

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='changing-text'>Original text</div>

<div class='new-text' title='New text 1'>Div 1</div>

<div class='new-text' title='New text 2'>Div 2</div>

Answer 4

先自己尝试一次，然后再在这里提出问题，或者如果您这样做了，请展示您的尝试

使用 CSS :hover 选择器

.new-text:hover {}

使用原生 JS鼠标悬停事件

<div onmouseover="()=>{}"></div>

使用 jQuery悬停事件

$(".new-text").hover(()=>{})