Rich-text Reply

Can div class on hover (or mouse-over)

arnevv 03-21-16
Accepted Solution

Can div class on hover (or mouse-over)

Hi there,

 

I would like to show a shopping cart when my visitors move their mouse over the shopping cart icon/description. Currently the user will only see this cart box when he clicks on the icon/description. 

 

So this is the original state before the user clicks: <div class="g1-cartbox g1-cartbox--off"> 

 

I would like to chance that to the following on hover (or mouse-over): <div class="g1-cartbox g1-cartbox--on">

Level 1

JDahlinANF 03-22-16
 

Re: Can div class on hover (or mouse-over)

[ Edited ]

@arnevv, It sounds like the jQuery event "mouseover" to remove the "off" class and add the "on" class to the DIV.

 

$(".g1-cartbox.g1-cartbox--off").mouseover(function() {
  $('.g1-cartbox').removeClass('g1-cartbox--off').addClass('g1-cartbox--on');
});

 

You could also try "mouseenter" to see if there is any difference in behavior.

For reference, all of the jQuery events are listed here: https://api.jquery.com/category/events/

 

arnevv 03-22-16
 

Re: Can div class on hover (or mouse-over)

Thanks Napoleon! Works like a charm!

This is the final code. I made one addition so it also works on mouseout.

$(".g1-cartbox__switch").mouseover(function() {
$('.g1-cartbox').removeClass('g1-cartbox--off').addClass('g1-cartbox--on');
});

$(".g1-cartbox__switch").mouseout(function() {
$('.g1-cartbox').removeClass('g1-cartbox--on').addClass('g1-cartbox--off');
});

$(".g1-cartbox__box").mouseover(function() {
$('.g1-cartbox').removeClass('g1-cartbox--off').addClass('g1-cartbox--on');
});

$(".g1-cartbox__box").mouseout(function() {
$('.g1-cartbox').removeClass('g1-cartbox--on').addClass('g1-cartbox--off');
});
Level 1
JDahlinANF 03-22-16
 

Re: Can div class on hover (or mouse-over)

@arnevv - Nice adaptation!

 

I wasn't sure if you wanted it to go away with the mouse out or not (if the current behavior is to click it to make it appear, then maybe clicking outside the box is required to make it disappear) and depending on if the box itself is contained within the clickable content area, using "mouseout" may cause the box to disappear when the user moves their mouse from the controlling area into the now-visible box.