无法使光标指针在悬停时显示



在onclick函数中,当我将鼠标滚动到"阅读更多"文本上时,它不会显示光标,因此您知道它是可点击的。我已经可以用cursor:pointer通过css来完成这项工作,但我遇到的问题是,在第一次点击页面后,我的所有元素只有在双击阅读更多时才会打开。第一次单击任何元素时,只需单击一次即可打开,但当我转到下一个元素并单击时,需要单击两次。我很感激能得到的任何帮助。感谢

<br><br>And all our treats are free from artificial colors and meet our standards for value and ingredient sourcing.&nbsp;&nbsp;
<span id="myBtn5" onclick="myFunction5()" style="color:#c44048;margin- 
left:0px;cursor:pointer;"><em>READ MORE ▼</em></span>
<br>
<br>
<span id="dots" style="display: inline;"></span>
<span id="more5" style="display: none;">
Every partner discloses the country of origin of every ingredient in each 
treat, as well as how they go about sourcing the ingredient. We also make 
sure that we partner with companies who we trust to find the best 
ingredients for cats. 
<br>
<br>
We ask Muddies’ cats to taste-test treats 
before we commit to carrying treats in our stores. While we can’t guarantee 
that every cat will love every treat, we hope with a little trial and error, 
you’ll find something that delights your cat.
<span id="dots" style="display: inline;"></span>
<span id="more5" style="display: none;">

<script>
function myFunction5() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more5");
var btnText = document.getElementById("myBtn5");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHtml = "READ MORE ▼";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = ""; 
moreText.style.display = "inline";
}
}
</script>
</span>
</span>

试试这个:https://jsfiddle.net/7rdqg38m/2/这个解决方案确实需要jQuery和CSS。这允许您使用toggleClass制作一个真正干净优雅的函数,当然也允许您避免内联样式

index.html:

<br><br>And all our treats are free from artificial colors and meet our standards for value and ingredient sourcing.&nbsp;&nbsp;
<span id="myBtn5" onclick="myFunction5()" style="color:#c44048;margin- 
left:0px;cursor:pointer;"><em>READ MORE ▼</em></span>
<br>
<br>
<span id="dots" class="hidden"></span>
<span id="more5" class="hidden">
Every partner discloses the country of origin of every ingredient in each 
treat, as well as how they go about sourcing the ingredient. We also make 
sure that we partner with companies who we trust to find the best 
ingredients for cats. 
<br>
<br>
We ask Muddies’ cats to taste-test treats 
before we commit to carrying treats in our stores. While we can’t guarantee 
that every cat will love every treat, we hope with a little trial and error, 
you’ll find something that delights your cat.
<script>
function myFunction5() {
$('#dots').toggleClass('hidden');
$('#more5').toggleClass('hidden');
$('#myBtn5').toggleClass('hidden');
}
</script>

index.css

.hidden {
display: none
}

最新更新