[英]How do I change a paragraph text when mouse hover over?
将鼠标悬停在第二个div上时,如何更改第二个段落的值? 使用该类而不使用ID的应当检测它悬停在某个位置上的那一类,或者这就是我认为至少是的。
.tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; /* Position the tooltip */ z-index: 1; } .tooltip:hover .tooltiptext { visibility: visible; }
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <p>Move the mouse over the text below:</p> <div class="tooltip">Hover over me <span class="tooltiptext"> <p class=radio> Here is some data </p> </span> </div> <br> <div class="tooltip">Hover over me <span class="tooltiptext"> <p class=radio> Here is some data </p> </span> </div>
如果要在hover
更改p
标签文本,请使用.hover
函数
$(".tooltip").hover(function(){ $(this).find("p").text("Text is updated"); })
.tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; /* Position the tooltip */ z-index: 1; } .tooltip:hover .tooltiptext { visibility: visible; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <p>Move the mouse over the text below:</p> <div class="tooltip">Hover over me <span class="tooltiptext"> <p class=radio> Here is some data </p> </span> </div> <br> <div class="tooltip">Hover over me <span class="tooltiptext"> <p class=radio> Here is some data </p> </span> </div>
您应该添加JS代码,如下所示。
var element = document.getElementsByClassName('tooltip')[1];
element.addEventListener("mouseover", function (e) {
this.oldText = this.innerHTML;
this.innerHTML = "Hello World";
});
element.addEventListener("mouseout", function (e) {
this.innerHTML = this.oldText;
});
嗯,您的问题不清楚...但是,我尝试...
<div class="tooltip">Hover over me
<span class="tooltiptext">
<p class="radio textchange"> Here is some data </p>
</span>
</div>
和js
<script>
$(".textchange").on('mouseenter',function (){ //change text here })
</script>
我没有尝试过,我按照我的想法写作
在.hover()
回调函数中,您可以使用.index()
来检查索引,在此基础上您可以更改段落的文本:
$('.tooltip').hover(function(){ var index = $('div.tooltip').index(this); if(index == 1) //check if current div is the second div, index are 0 based $(this).find('.radio').text('New text at position '+ index); });
.tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 1; } .tooltip:hover .tooltiptext { visibility: visible; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <p>Move the mouse over the text below:</p> <div class="tooltip">Hover over me <span class="tooltiptext"> <p class=radio> Here is some data </p> </span> </div> <br> <div class="tooltip">Hover over me <span class="tooltiptext"> <p class=radio> Here is some data </p> </span> </div>
在HTML中有一种更好的方法和更有效的工具提示:使用::before
或::after
伪元素。
为了更改第二个元素的文本,我使用了2个Javascript事件:一个在鼠标悬停时发生,另一个在鼠标悬停时发生:
let tt = document.querySelectorAll(".ptooltip")[1]; tt.addEventListener("mouseover",()=>{ tt.textContent = "Thank you" }) tt.addEventListener("mouseleave",()=>{ tt.textContent = "Hover over me" })
.ptooltip { position: relative; display: block; width: 7em; } .ptooltip::after { content: attr(data-tt); background: black; color: white; padding: 0.5em; border-radius: 0.3em; position: absolute; display: none; left: 7em; top: 0; width:8em; } .ptooltip:hover::after { display: block; }
<p>Move the mouse over the text below:</p> <p class="ptooltip" data-tt="Here is some data 1">Hover over me</p> <p class="ptooltip" data-tt="Here is some data 2">Hover over me</p>
希望对您有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.