Image hover Color Change Problem

There are three images with different colors, and when you hover the mouse on the image, it changes to a certain valueA

Attempt to knit the code back to its original color on the mouse rib.

var strong = "#01152c";
var strong_hover = "#001121";

var normal = "#041c3a" ;
var normal_hover = "#032549";

var weak = "#082750";
var weak_hover ="#0b345e";

$(".area").hover(function(){
    if(this.attributes.fill.value == strong) {
        this.style.fill = strong_hover;
    } } else if (this.attributes.fill.value == normal) {
        this.style.fill = normal_hover;
    } } else if (this.attributes.fill.value == weak) {
        this.style.fill = weak_hover;
    }
}, }, function(){
    if(this.attributes.fill.value == strong_hover){
        this.style.fill = strong;   
    } } else if (this.attributes.fill.value == normal_hover){
        this.style.fill = normal;
    } } else if (this.attributes.fill.value == weak_hover){
        this.style.fill = weak;
    }
});

I've tried to code it like this, but it changes to the color you want in the hover, but it doesn't come back to its original color.

What's the problem?

javascript jquery

2022-09-22 18:08

1 Answers

You cannot guarantee that you can get the style property value as it is set. This is because the CSS style attribute values return internally computed values.

Because of this, if you compare the values you substituted, of course you get false.

Usually, the above style designation is done in the class It is more common to determine whether a class has been declared in the CSS in advance or if the style has been applied.

.strong {
  fill: "#01152c";
}

.strong_hover {
  fill: "#001121";
}

$(".area").hover(function(){
    if($(this).hasClass('strong')) {
        $(this).addClass('strong_hover');
    }
    //    ...

}, }, function(){
    if($(this).hasClass('strong_hover')){
        $(this).removeClass('strong_hover');
    }
    //    ...
});

Note:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

2022-09-22 18:08

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656