javascript - 在 jQuery 中用 替换

Question

所以我在 stackoverflow 上浏览了一堆不同的问题，但找不到确切的答案。我还浏览了 jQuery API，但也无法弄明白。这就是我的问题。

<div id="click-nav">
   <ul>
       <li>
           <img src="img/pic.png">
                   <p>Some text and stuff</p>
       </li>

然后我还有 3 个相同的情况，但每个 p 标签都有不同的文本。我想要做的是将 img 标签替换为所有 4 个列表项悬停时的 p 标签，并在悬停时将每个 img 替换为其相应的 p 标签。现在我把它作为我的 jQuery，请记住我是 jQuery 的新手，所以我可能完全错了。

<script> 
    $(document).ready(function () {
                    $('#click-nav p').hide();     //TO HIDE THE <P>
                        $("#click-nav img").hover(function () {    //FOR THE HOVER
                        $("#click-nav img").replaceWith('#click-nav p');
                    });
                });
</script>

所以我从来没有开始滚动，我只是想先弄清楚如何让悬停事件起作用，然后再开始滚动。希望这不是一个巨大的困惑。谢谢

Answer 1

你这样做。不要将悬停效果放在 img 上，因为如果图像被隐藏，焦点就会消失。

$("#click-nav ul li").hover(function () {   
     $(this).find('img').hide();
     $(this).find('p').show();
});

如何以这种方式进行操作，当您将鼠标悬停在它外面时，您需要创建另一个函数来反转效果。

更好的解决方案是使用 CSS 而不是 jQuery

<style>
   #click-nav ul li:hover img {
       display: none;
   }
   #click-nav ul li:hover p {
       display: block;
   }
</style>

使用 css，您无需担心编写两个脚本。

JSFIDDLE FOR CSS