悬停前后不同的css样式答案

【问题标题】：Different css style before and after hover悬停前后不同的css样式
【发布时间】：2017-01-11 23:11:49
【问题描述】：

我有一个 svg 对象，我希望它具有不同的样式： a）第一次加载图像（填充：白色） b) 当鼠标悬停在对象上时（填充：黄色） c) 当鼠标离开物体时（填充：蓝色）

我似乎找不到如何区分 a) 和 c) 状态。

提前致谢

【问题讨论】：

【解决方案1】：

我对 stackoverflow 很陌生，所以这可能不是一个好的答案，但我会尝试正确回答这个问题。

我认为你应该尝试使用 jQuery，你要做的是在 CSS 中设置起始值，Fill: White。然后在 jQuery 中你会

$("YOUR SELECTOR").hover(function(){
$(this).css("background", "yellow");
}, function(){
$(this).css("background", "blue");
});

有关此的更多说明，请访问：here

希望这对您有所帮助，我是 stackoverflow 的新手，请善待；）

干杯

【讨论】：

这当然是一个很好的答案，只是需要稍作修正。将 $(this).css("fill", "yellow"); 更改为 $(this).css("background", "yellow"); 就可以了
你去 ;)

【解决方案2】：

这很容易。您可以使用 mouseleave 事件来识别元素已被悬停一次，然后使用它来更改元素的背景。

这里有一些代码：

jQuery('#square').mouseleave(function() {
    jQuery(this).removeClass('red')
       jQuery(this).addClass('blue');
});

#square{
  width:100px;
  height: 100px;
  }

.red {
  background:red;
  }

#square:hover{
  background:yellow;
  }

.blue {
  background:blue;
  }

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

【讨论】：