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

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(()=>{})