与在CSS中停用悬停效果相关的问题

时间:2015-01-03 08:15:27

标签: html css

我在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的内容??

1 个答案:

答案 0 :(得分:1)

只需在您的班级中使用div排除id。这可以通过CSS否定选择器:not()来完成。

而不是:

.grid-container-columns:hover { ...

这样做:

.grid-container-columns:not(#divColumns):hover { ...

演示小提琴:http://jsfiddle.net/abhitalks/ujjamg9y/

请注意,在演示中,第一个div不会响应悬停,但第二个{H}不响应。