Issue related to deactivating hover effect in CSS - html

Question

I have following class in CSS file :
.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); }
and following 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>
When I hover in the above div(having id="divColumns"), content of the div displays. I want to deactivate the hover effect and don't want to display the content but don't want to remove CSS class because its used in other pages..
I have tried following in my HTML page:
$(".grid-container-columns").hover(function (event)
{
event.preventDefault();
})
But it doesn't working. How can i stop displaying content of div in hover effect??

Answer 1

Just exclude that div using its id in your class. This can be done by the CSS negation selector :not().
Instead of:
.grid-container-columns:hover { ...
Do this:
.grid-container-columns:not(#divColumns):hover { ...
Demo Fiddle: http://jsfiddle.net/abhitalks/ujjamg9y/
Notice in the demo that the first div doesn't respond to hover, but the second one does.