我在CSS文件中有以下类:
.grid-container-columns:hover .column-container-wrap, .grid-container-columns.active .column-container-wrap {
height: 400px;
-webkit-transition: height 0s;
-moz-transition: height 0s;
-o-transition: height 0s;
transition: height 0s; }
/* line 369, ../scss/_general.scss */
.grid-container-columns:hover .column-container, .grid-container-columns.active .column-container {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0); }
并遵循HTML
<div id="divColumns" class="grid-container-columns">
<div class="column-btn">
<span class="fa fa-th-list"></span> Kolommen
</div>
<div class="column-container-wrap">
<div class="column-container"></div>
</div>
</div>
当我将鼠标悬停在上面div(having id="divColumns")
时,会显示div的内容。我想停用悬停效果并且不想显示内容但是不想删除CSS类,因为它在其他页面中使用过..
我在HTML页面中尝试过关注:
$(".grid-container-columns").hover(function (event)
{
event.preventDefault();
})
但它不起作用。如何在悬停效果中停止显示div的内容??
答案 0 :(得分:1)
只需在您的班级中使用div
排除id
。这可以通过CSS否定选择器:not()
来完成。
而不是:
.grid-container-columns:hover { ...
这样做:
.grid-container-columns:not(#divColumns):hover { ...
演示小提琴:http://jsfiddle.net/abhitalks/ujjamg9y/
请注意,在演示中,第一个div
不会响应悬停,但第二个{H}不响应。