时间戳

首页 > 解决方案 > 无法让光标指针在悬停时显示

javascript - 无法让光标指针在悬停时显示

问题描述

在 onclick 功能上，当我将鼠标滚动到 Read More 文本上时，它不会显示光标，因此您知道它是可点击的。我已经能够通过带有光标：指针的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 ▼&lt;/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>

标签： javascript

解决方案

试试这个：https ://jsfiddle.net/7rdqg38m/2/ 这个解决方案确实需要 jQuery 和 CSS。这使您可以使用 toggleClass 制作一个非常干净和优雅的函数，当然还可以避免内联样式

索引.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 ▼&lt;/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>

索引.css

.hidden {
  display: none
}

推荐阅读