Disable Hover feature with Javascript or jQuery

JavaScript
1

Hi wonderful people!

link to Code Pen: https://codepen.io/IDCoder/pen/LrQNOR)
I’m trying to use a button that upon active (or being clicked), it makes another “button” (the surrounding container) active (act as if it is being clicked instead). I’m designing a UX of this:

  1. as you mousever onto form, form -hover effect takes place causing blue surround LED light to glow (currently works as wanted)
  2. as you then continue over to button (still mouseover), surround LED light remains a glow (currently works as wanted)
  3. as you click on button (on down stroke of key) this will remove the hover effect (blue LED glow) of surrounding container , and on upstroke of key, the hover effect (surround LED blue glow) returns
    So, essentially what will happen when you click the green button is that the blue LED will flash (as it moves from erasing current hover state to re-adding it) …currently not working

current javascript code:

$('form').on('submit', function(event) {
    event.preventDefault();
  $(this).find('metal').removeClass('hover');
  $(this).find('metal').addClass('no-hover');
});

Code for related CSS classes for `hover` and `non-hover`:


.metal:hover {
  color: hsl(210, 100%, 40%);
  text-shadow: hsla(210,100%,20%,.3) 0 -1px 0, hsl(210,100%,85%) 0 2px 1px, hsla(200,100%,80%,1) 0 0 5px, hsla(210,100%,50%,.6) 0 0 20px;
  box-shadow: 
    inset hsla(210,100%,30%,  1) 0  0px 0px 4px, /* border */
    inset hsla(210,100%,15%, .4) 0 -1px 5px 4px, /* soft SD */
    inset hsla(210,100%,20%,.25) 0 -1px 0px 7px, /* bottom SD */
    inset hsla(210,100%,100%,.7) 0  2px 1px 7px, /* top HL */
    
    hsla(210,100%,75%, .8) 0  0px 3px 2px, /* outer SD */
    hsla(210,50%,40%, .25) 0 -5px 6px 4px, /* outer SD */
    hsla(210,80%,95%,   1) 0  5px 6px 4px; /* outer HL (blue LED ) */
}

(.no-hover):hover{
  color: hsl(210, 100%, 40%);
  text-shadow: hsla(210,100%,20%,.3) 0 -1px 0, hsl(210,100%,85%) 0 2px 1px, hsla(200,100%,80%,1) 0 0 5px, hsla(210,100%,50%,.6) 0 0 20px;
}

When I click on the green button the effect I want to achieve doesn’t happen. What I’m I doing wrong? Thanks in advance for your help!

3

@camperextraordinaire, haha…FIXED! I had missed that lol

5

@camperextraordinaire, just added!

7

@camperextraordinaire, right here:
.metal:hover {
…it’s in the CSS code I provided.
And, in regards to the onsubmit event, this is a server-less form that will be enabled later. Right now, I just want that when I click on the green button, the surrounding container flashes per the removal and addition of the existing hover effect.

9

@camperextraordinaire, so I can’t use jQuery or javascript to target pseudoclasses?

11

@camperextraordinaire, I just found out that mouseout has been deprecated…so I used mouseleave instead…this is the code I have now (threw in some placeholder css until I get stuff right) :
Code Pen: https://codepen.io/IDCoder/pen/LrQNOR

$(".metal").mouseover(function(){
$(this).css({
          "background": "#000",
          "color": "",
          
        });
});

$(".metal").mouseleave(function(){ //mouseleave instead of mouseout, as mouseout seems to have been deprecated
$(this).css({
        "background": "",
          "color": "",
        });
});

But how do I target the “Login” button in jquery?

13

@camperextraordinaire, yeah, I decided to do that right after I asked you . Originally, I was looking for a way to target it just as a submit button without adding a class or ID)
This is what I have right now:

//make login button activate an "active" class for metal
$(".whatever").mouseover(function(){
$(".metal").css({
          "background": "#000",
          "color": "",
        });
});

$(".whatever").mouseleave(function(){ //mouseleave instead of mouseout, as mouseout seems to have been deprecated
$(".metal").css({
        "background": "",
          "color": "",
        });
});

Currently using some place-holder CSS styles, just to test things out. However, I still need to disable the hover CSS effect or transfer the hover effects from CSS into my javascript or jquery…I need to get my vision to work! :tired_face::persevere::thinking:

14

Ok, folks, Hi! Can you all please help me out here?

Goal/logic: make clicking the green button on the form activate an active class for .metal (class for form container), causing the whole form to appear as if it being pressed like a regular button (blue surround-LED will flash in process)

I’ve nearly exhausted options, I don’t know how to make my form container become active in javascript/jQuery.

Code Pen here: https://codepen.io/IDCoder/pen/LrQNOR?editors=0110
These are some examples of some code experiments that I’ve tried:

/*
//operation test using .addClass()/.removeClass
1.
$('form').on('submit', function(event) {
    event.preventDefault();
  $(this).find('metal').removeClass('hover');
  $(this).find('metal').addClass('no-hover');
  console.log(submit);
});

//operation test using .mouseover()/.mouseleave
2.
$(".whatever").mouseover(function(){
$(".metal").css({
          "background": "",
          "color": "",
        });
});
*/
15

The event is good, so you should be able to add/remove/manipulate the DOM as you please.

However there are two details to mind:

1 - you have two required field: they will prevent “submit” to be called until you actually fill them

2 - $(this) is the form element. That has no class .metal on it.
So if you actually want to target the div that has .metal as class and/remove classes better use:

$(".metal")

as selector :slight_smile:

Just to give you a working example:

$('form').on('submit', function(event) {
  event.preventDefault();
  $(this).css("background-color", "red")
});

This will give form a red-background.
Hope it helps

16

@Marmiz, thanks for your help!
Checkout the buttons in this this Code Pen here: https://codepen.io/simurai/pen/DwJdq.
I have made my form into a big metal button. When I press the green button on my form, I want the effect of pressing the entire metal form as a button, per the demo in Code Pen link here: https://codepen.io/simurai/pen/DwJdq

What I want to make happen is that when I click the green button (so some type of onclick), the blue LED for that metal class turns off (disabled) and then comes on again (enabled), which will by appearance, flash it essentially.

I want to achieve this by assigning active to .metal class via javascript/jquery. I need a way to bind an onclick method to the green button and assign to it an active enabler for the .metal class so my metal form can act like a button lol . So after both boxes are filled out, you press the green button which will activate the .metal class to ```active`` causing it to behave like a button. That’s where I’m going insane lol.:persevere::persevere:

I want to assign this CSS rule below, to the .metalclass via on onclick feature for the green button, using javascript/jquery:

.metal:active {
  color: hsl(210, 100%, 40%);
  text-shadow: hsla(210,100%,20%,.3) 0 -1px 0, hsl(210,100%,85%) 0 2px 1px, hsla(200,100%,80%,1) 0 0 5px, hsla(210,100%,50%,.6) 0 0 20px;
  box-shadow: 
    inset hsla(210,100%,30%,  1) 0  0px 0px 4px, ... border 
    inset hsla(210,100%,15%, .4) 0 -1px 5px 4px, ...soft SD 
    inset hsla(210,100%,20%,.25) 0 -1px 0px 7px, ....bottom SD
    inset hsla(210,100%,100%,.7) 0  2px 1px 7px, .....top HL 
    
    hsla(210,100%,75%, .8) 0  0px 3px 2px, ....outer SD
    hsla(210,50%,40%, .25) 0 -5px 6px 4px, ... outer SD
    hsla(210,80%,95%,   1) 0  5px 6px 4px; ...outer HL
}
17

So after both boxes are filled out, you press the green button which will activate the .metal class to ```active`` causing it to behave like a button.

Sorry but I don’t get your end goal is.

You want that when I press login the box won’t have the :hover property ( so will be a no-hover) and then animate back to having a border?

Or you want to make it look like the whole metal div looks like is going “inside” the page like if I was clicking a 3D element?

If it’s the latter you can:

// gave an id since it's less dependent to adding -removing .metal class
<div class="metal linear" id="box"> 

// on mouse press give a fake depth
$("#login").mousedown(e => { 
  $("#box").addClass("fakeClick")
})

// on up remove
$("#login").mouseup(e => {
  $("#box").removeClass("fakeClick")
})

/*
 You can insert a box shadow so that it looks like the element is going inside the page 
- it's a common trick
  note: you may need to override since you are using box-shadow also on .metal
*/
.fakeClick {
  box-shadow: inset 0px 0px 50px 6px rgba(0,0,0,0.51);
}
18

Thanks for bearing with me! Yes! That’s almost it! Pressing the “log-in” button will cause the hover effect of the glow-LED to turn off then turn back on (essentially on the down keystoke, it will turn off and on the up keystroke it will turn back on)

Also, the other idea of “pressing into the page”, That idea worked via using this override: !important What time are you on? I’m on US Central Time?

19

Here you go:

Your CSS had an error (don’t ask me to pint-point that mess of box-shadow) I just switched to a

   box-shadow:         inset 0 0 10px #000000 !important;

Mind the !important. As I told you before you may had needed to overwrite the .metal css property.

This just show that the entire CSS and html structure, as you designed does not make much sense.

1 Like
20

@Marmiz, HAHAHA “mess of box-shadow” …it often takes a lot of lines of code to make a great box-shadow…same thing for gradients…

Also, I see you also used !important in your code as well…??

But thanks for solving the problem I had! You made my vision come true! I thought it I would need way complicated than that, because I was thinking that I’d have to disable the hover effect! :star_struck::smiley: