Javascript 替换<；img>；与<；p>；在jQuery中

所以我在stackoverflow上问了很多不同的问题，但是没有找到确切的答案。我还浏览了jQueryAPI，但也没有弄明白。这就是我的问题

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

$（文档）.ready（函数（）{
$（'#单击导航p'）.hide（）；//隐藏
$（“#单击导航img”）.hover（函数（）{//用于悬停
$（“#单击导航img”）。替换为（“#单击导航p”）；
});
});

所以我从来没有进行过滚转，我只是想先弄清楚如何使悬停事件生效，然后再进行滚转。希望那不是一团混乱。谢谢

试试看

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

试一试

---

你是这样做的。不要将悬停效果放在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>

#单击导航ul li：悬停img{
显示：无；
}
#单击导航ulli：悬停p{
显示：块；
}

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

---

你是这样做的。不要将悬停效果放在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>

#单击导航ul li：悬停img{
显示：无；
}
#单击导航ulli：悬停p{
显示：块；
}

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

---

您有JSFIDLE吗？这里没有太多的信息可以完全理解。。在使用你的功能时，请引导我通过一个用户故事。我可以制作一个JSFIDLE，我会发布一个链接soon@bobeartow你真的想改变或者只是隐藏图像并显示p吗？@Ryanb58好的，所以基本上在到达这个列表时，你只会看到img，而不会看到img后面的段落。当鼠标悬停在每个图像上时，图像将替换为相应的段落，img将被隐藏。一旦结束，段落将消失，图像将再次显示。你有JSFIDLE吗？这里没有太多信息需要完全理解。。在使用你的功能时，请引导我通过一个用户故事。我可以制作一个JSFIDLE，我会发布一个链接soon@bobeartow你真的想改变或者只是隐藏图像并显示p吗？@Ryanb58好的，所以基本上在到达这个列表时，你只会看到img，而不会看到img后面的段落。当鼠标悬停在每个图像上时，图像将替换为相应的段落，img将被隐藏。一旦滚动下来，段落将消失，图像将再次显示。@RussellBevan你是什么意思？css只会影响当前悬停的eh

。您不会同时在多个

上悬停，对吧？@RussellBevan我为css检查添加了一个提琴，看看它是如何工作的，并享受。：）非常感谢你的帮助。这管用！真不敢相信我没有先尝试这个。@RussellBevan你什么意思？css只会影响当前悬停的eh

。您不会同时在多个

上悬停，对吧？@RussellBevan我为css检查添加了一个提琴，看看它是如何工作的，并享受。：）非常感谢你的帮助。这管用！真不敢相信我没试过这个。