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

Question

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

Answer 1

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

代替:

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

这样做:

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

演示 fiddle :http://jsfiddle.net/abhitalks/ujjamg9y/

注意在演示中第一个 div 不响应悬停，但第二个响应。