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

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(&nbsp; function() {&nbsp; &nbsp; original = $(this).text();&nbsp; &nbsp; $(this).text($(this).attr("title"));&nbsp; }, function() {&nbsp; &nbsp; $(this).text(original);&nbsp; });演示var original ="";$('.new-text').hover(&nbsp; function() {&nbsp; &nbsp; original = $('.changing-text').text();&nbsp; &nbsp; $('.changing-text').text($(this).attr("title"));&nbsp; }, function() {&nbsp; &nbsp; $('.changing-text').text(original);&nbsp; });<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() {&nbsp; &nbsp; &nbsp;var title = $(this).attr('title');&nbsp; &nbsp; &nbsp;var orignal = $('.changing-text').text();&nbsp; &nbsp; &nbsp;$(this).attr('data-orignal',orignal);&nbsp; &nbsp; &nbsp;$('.changing-text').text(title);&nbsp; &nbsp; }).mouseleave(function() {&nbsp; &nbsp; &nbsp;var orgnl =&nbsp; $(this).attr('data-orignal');&nbsp; &nbsp; &nbsp;$('.changing-text').text(orgnl);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; });.container div {&nbsp; &nbsp; display: inline-flex;}&nbsp;.new-text {&nbsp; &nbsp; display: block;&nbsp; &nbsp; 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">&nbsp; <div class='new-text' title='New text 1'>Div 1</div>&nbsp; <div class='new-text' title='New text 2'>Div 2</div>&nbsp;&nbsp;</div>

Answer 3

如果我没猜错，那就试试这个吧。是的，您认为正确，只有css您必须使用jQuery它是不可能的。试试这个解决方案。jQuery(document).ready(function(){&nbsp; &nbsp; var changing_text = jQuery('.changing-text').text();&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; jQuery('.new-text').hover(function(){&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; var title_value = jQuery(this).attr("title");&nbsp; &nbsp; &nbsp; &nbsp; jQuery('.changing-text').text(title_value);&nbsp; &nbsp; }, function(){&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;jQuery('.changing-text').text(changing_text);&nbsp; &nbsp; });&nbsp;});<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(()=>{})