Break the "tail" that leaves the "hover" effect

Question

Break the "tail" that leaves the "hover" effect

Navigation

#1 by (2 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (0 votes)

2

I need a div to have a style when you pass the cursor over ( hover ), and another style when you do a click .

//HTML
<div>texto</div>

//HOVER JS
$('div').hover(function() {
 $(this).css({'background-color':'black', 'color:white'})
}, function () {
 $(this).css({'background-color':'white', 'color:black'})
})

//CLICK JS
$('div').click(function() {
 $(this).css({'background-color:red', 'color:yellow'})
})

At the beginning it works well. When I move the cursor over the div, the background of it becomes black and the letters white; when I remove the cursor, the background returns to white (or transparent) and the letters to black. Then, when I click on the div, the bottom of it turns red and its letters yellow, but here the problem! ..

At the moment of removing the cursor from my red div, the background of this one is painted white and the letters of black .. That is to say, the hover has a tail, and its effect weighs more than the effect of the click .. it is understood? I would like that when I click on the div, it will stay in red, canceling the previous effect of the hover. That is, the hover works only until it clicks. I want that.

javascript jquery css

asked by ann 09.03.2018 в 21:12

source

4 answers

Doubt in query SQL group by and nulls problems with characters in xml

score 2 · Answer 1

And why not consider the idea of performing with CSS simple, and since JQuery just listen to the event click to make the desired change in this case {'background-color':'red', 'color' :' yellow'} . It would be the simplest and least problematic:)

$('div').click(function() {
	$(this).css({'background-color':'red', 'color' :' yellow'})
});

/* Estilo base de Inicio */
div{
  width: 100px;
  height: 100px;
  border : 1px solid blue;
  background: white;
  color: black;
}
/* Estilo para el Hover */
div:hover{
  background: black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>texto</div>

score 0 · Answer 2

You could handle the hover event from the css and already the click event you handle it as you are doing.

<div class="algo">texto</div>

.algo:hover{background-color:black;color: white;}

and since jquery.

$('.algo').click(function() {$(this).css({'background-color':'red', 'color':'white'})})

score 0 · Answer 3

Adding 3 kinds of css for when it is in normal state, when you pass the cursor over it and when you click and activate it.

.active{
  background-color: red; 
  color: yellow;
}
.hover-in{
  background-color: black; 
  color:white;
}
.normal{
  background-color: white;
  color: black;
}

Now the behavior that reproduces this example is the same as yours, but I added that if you clicked again on a div element that had the red color it would return to its normal state, ie white background black letters

HTML:

<div class="normal">texto</div>

JAVASCRIPT:

$('div').hover(function() {  
 var self = $(this);
 if(self.hasClass('normal'))
    self.removeClass('normal').addClass('hover-in');
}, function () {
    var self = $(this);
    if(self.hasClass('hover-in'))
        self.removeClass('hover-in').addClass('normal');
});

//CLICK JS
$('div').click(function() {
 var self = $(this);
 if(self.hasClass('active')){
   self.removeClass('active').addClass('normal');
 } else { 
    self.removeClass('normal hover-in').addClass('active');
 }
});

score 0 · Answer 4

If you need to do the whole process through JQuery, I suggest you use the addClass method instead of the css method.

Note: If it is not absolutely mandatory to use JQuery for the whole process, I suggest you review my second example.

Mainly for two reasons:

The css method adds the styles in inline , so you'll be overwriting the styles you already had. That's why when you click and exit the div, as you still have the mouse over, the styles when you exit the hover apply and overwrite the ones you assigned to the div.
Since the css method applies the inline styles, these will be much more difficult to overwrite and maintain if you need to apply styles that conflict with these due to < strong> specificity .

When adding classes and, endowing us with the properties of CSS (Cascade Style Sheets), how the styles that are applied are those that have a greater specificity or, if they have the same, those that are lower (cascade method) , putting the last class of the click we would be the following.

$('div').hover(function() {
 $(this).addClass('negro');
}, function () {
 $(this).addClass('blanco');
})

$('div#texto').click(function() {
 $(this).addClass('amarillo');
})

.negro{
  background-color: black;
  color: white;
}

.blanco{
  background-color: white;
  color: black;
}

.amarillo{
  background-color: red;
  color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="texto">texto</div>

Anyway, I propose to use CSS for the hover effect and only use JQuery to detect the click event. Of course, much better to use the addClass event, since it will add a class and not inline styles, which will allow you to maintain it better.

$('div').hover(function() {
 $(this).addClass('negro');
}, function () {
 $(this).addClass('blanco');
})

$('div#texto').click(function() {
 $(this).addClass('amarillo');
})

div:hover{
  background-color: black;
  color: white;
}

.amarillo{
  background-color: red;
  color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="texto">texto</div>