CODEWITHSUNDEEP
htmlcss
ghanshyam.mirani
ghanshyam.mirani

Reputation: 3101

Issue related to deactivating hover effect in CSS

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??

Upvotes: 0

Views: 76

Answers (1)

Abhitalks
Abhitalks

Reputation: 28387

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.

Upvotes: 1

Related Questions