如何在点击弹出窗口jQuery内应用悬停效果
How to apply a hover effect while inside a click popup jQuery?
我有一个容器div,它最初是隐藏的,直到发生点击事件。div 包含一个图像。我想在该图像上应用悬停效果,但是,我无法使悬停工作,因为它被单击事件覆盖。下面是我的代码。
<div class='comment-click'>
<div class="comment-product">
<img class="checkered-shirt" src="img/checkered.jpg" />
<div class="comment-hover-popup">
<img class="popup-pic" src="img/Calvin_pic.png" />
<h2 class="hover-title">Nautica</h2>
<p class="description">Nautica Men's Hyannis Shoe</p>
<input class="buy" id="buy" type="submit" value="Buy" />
<p class="price">$55</p>
<p class="hover-comment-command">Comment (2)</p>
<img class="plus-icon" src="img/plus-icon.png" />
<img class="check-icon" src="img/check-icon.png" />
</div>
</div>
<h1>J.Crew</h1>
<p class="product-description">J.Crew Plaid Button Down Shirt</p>
<img class="comment-x" src="img/x.png" />
<ul>
<li>
<div class="comment-one">
<img src="img/Calvin_pic.png" />
<p class="product-commenter">Paul Mickan </p>
<p class="product-comment">Love this shirt #hipster</p>
</div>
</li>
<li>
<div class="comment-two">
<img src="img/Calvin_pic.png" />
<p class="product-commenter">Calvin Hemington </p>
<input class="product-comment" type="text" name="Add a comment..." onfocus="if (this.value=='Add a comment...') this.value = ''" value="Add a comment..." /></a>
<input class="comment-post" type="submit" value="Post" />
</div>
</li>
</ul>
</div>
jQuery
$('.hover-comment-command').click(function () {
$('.comment-click').fadeIn();
$('.comment-hover-popup').hide();
});
$('.comment-x').click(function () {
$(".comment-click").fadeOut();
});
$(".checkered-shirt").hover(function () {
$(this).find('.comment-hover-popup').fadeIn(300);
}, function () {
$(this).find('.comment-hover-popup').hide();
});
在
hover()
函数中使用$(this).siblings()
而不是$(this).find()
$(".checkered-shirt").hover(function () {
$(this).siblings('.comment-hover-popup').fadeIn(300);
}, function () {
$(this).siblings('.comment-hover-popup').hide();
});
find()
用于匹配元件的十进制
siblings()
适用于匹配元素的兄弟姐妹
在此处查看文档
相关文章:
- 访问离线jquery应用程序中的本地文件
- 如何在使用jQuery应用display:none后正确显示元素
- 如何在页面刷新后使用 jquery 应用 CSS(刷新前构建 CSS)
- 将jQuery应用于多个不同的动态创建的HTML元素
- 页面上有两个jQuery应用程序,一次只能运行一个
- 如何处理在多页 HTML/jquery 应用程序中链接到脚本和 css 文件
- 将 Jquery 应用于生成的内容
- jQuery - 应用类时刷新 dom
- 将Jquery应用于谷歌地图标记
- 分析 jQuery 应用程序
- Chrome iOS - 使用 jQuery 应用类时的加载指示器
- Jquery 应用类和删除类
- 使用CSS和jquery应用滚动效果
- JQuery应用存储在变量中的css
- 如何使用jQuery应用CSS并在过滤后忽略隐藏元素
- 如何使用jquery应用复杂生成的样式
- 引导程序可折叠嵌套导航jquery应用于多个目标
- 使用POST从PhoneGap,移动jQuery应用程序跨域脚本检测成功的html表单提交
- Wordpress子主题没有通过JQuery应用样式
- 使用JavaScript/JQuery应用css值