当鼠标悬停在上面时，如何更改段落文本?

Question

将鼠标悬停在第二个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>

Answer 1

嗯，你的问题不清楚...但是，我尝试...

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

我没有尝试过，我按照我的想法写

Answer 2

如果要更改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>

Answer 3

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

我希望你会发现有用。

Answer 4

在.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>

Answer 5

你应该添加如下所示的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;
});

代码笔