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

【问题标题】：Issue related to deactivating hover effect in CSS与停用 CSS 中的悬停效果相关的问题
【发布时间】：2015-01-03 08:15:26
【问题描述】：

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

【问题讨论】：

你需要grid-container-columns 没有悬停效果
wny 不为这个特定元素创建一个类？

标签： html css

【解决方案1】：

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

代替：

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

这样做：

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

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

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

【讨论】：