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

如果您想更改p上的hover标签文本，请使用.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 2

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

Codepen

Answer 3

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

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

使用::before或::after伪元素，是一种在HTML中获得工具提示的更好的方法，并且更有效。

为了更改第二个元素的文本，我使用了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>

希望您会发现有用。

鼠标悬停时如何更改段落文本？

5 个答案: