Question

所以我在stackoverflow上遇到了一堆不同的问题，但无法找到确切的答案。我也经历了jQuery API并且无法解决这个问题。所以这就是我的问题。

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

然后我有3个相同的情况，但每个p标签有不同的文字。我想要做的是在悬停时用所有4个列表项替换img标签和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

Answer 2

尝试

$('img').on('onmouseover', function(){
    $(this).replaceWith($(this).closest('p'));
});

用jQuery中的<p>替换<img/> </p>

2 个答案: