CODEWITHSUNDEEP
jquerycss
Ante Medic
Ante Medic

Reputation: 83

Disable click on div but not hover?

I'm trying to disable click on div, but not hover. I'm trying with css: pointer-events:none;, but it also disables hover effects.

I tried with jquery also, but with no success.

Is there any way to achieve this?

Upvotes: 3

Views: 2797

Answers (3)

Code_Ninja
Code_Ninja

Reputation: 1867

I think this is what you are looking for:

This is my dummy HTML:

<span>
<div id="disableButton">
Hover me. OR. Click me.
</div>
</span>

This is my jquery:

$("#disableButton").click(function(){
  $(this).attr("disabled", "disabled");
});
$("#disableButton").mouseleave(function(){
    $(this).removeAttr("disabled");
});

This is the css that I used that will help you understand the functioning properly:

#disableButton:hover{
  background-color: yellow;
}

div#disableButton[disabled=disabled]{
  background-color:grey;
}

This is the link to my fiddle: https://jsfiddle.net/x5ve63w5/3/

I hope this helps.

Thanks.

Upvotes: 0

Sumit Bhattarai
Sumit Bhattarai

Reputation: 308

try this example:

$(function () {
    $("#disabledDiv").off('click').on('mouseover mouseout', function(e){
    let $this = $(this);
         if(e.type === 'mouseover'){
         $this.css('background-color', 'red');
         }else if(e.type === 'mouseout'){
         $this.css('background-color', 'green');
         } 
    });
    
});
#disabledDiv
{
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="disabledDiv">
  Hover Me
</div>

Upvotes: 0

Udhay Titus
Udhay Titus

Reputation: 5869

just use single line code

$("#yourdivid").off('click');

try this example

$(function () {
    $("#banner-message").click(function(){
    $(this).removeClass("alt");
  });
    $("#banner-message").off('click');//this line disable click event
    $("#banner-message").hover(function(){
         $(this).addClass("alt");
    });
    
});
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner-message">
  <p>Disable Click Event and Enable for Hover</p>
</div>

Upvotes: 1

Related Questions