即使在取消悬停后如何使悬停效果保持不变？答案

【问题标题】：How to make hover effect stays even after unhover?即使在取消悬停后如何使悬停效果保持不变？
【发布时间】：2017-06-13 04:40:21
【问题描述】：

我为这个问题创建了一个简单的 JSFiddle。链接在这里： https://jsfiddle.net/tnkh/Loewjnr3/

CSS：

.container{
 background: white;
 display:flex;
 justify-content: center;
 align-items: center;
 height:50px
}

.circle {
 display: inline-block;
 width: 20px;
 height: 20px;
 background: #0f3757;
 -moz-border-radius: 50px;
 -webkit-border-radius: 50px;
 border-radius: 50px;
 margin-left:10px;
 float:left;
 transition: all 0.3s ease
}

.circle:hover {
 background:orange;
}

基本上在这里，我可以将鼠标悬停在任何圆圈上以更改其颜色。我想问一下，在鼠标移到白色容器后，我怎样才能使橙色停留在我悬停的任何特定圆圈上？

我可以使用任何脚本或 CSS 动画来解决这个问题吗？

【问题讨论】：

那么，当你搬出白色容器时，它应该被移除吗？
@GuruprasadRao 不，悬停效果应该保持打开

标签： javascript jquery html css

【解决方案1】：

只需将mouseover 事件添加到.circle 元素并编写具有background-color 属性的active CSS 类，当event 发生时从任何.circle 中删除active 类并将其添加到当前element

JS

$(".container span.circle").on('mouseover',function(){
    $(".circle").removeClass('active');//remove from other elements
    $(this).addClass('active');
});

CSS

.active {
  background:orange;
  transition: all 0.5s ease
}

Updated Fiddle

【讨论】：

好答案芽+1
哇，有人嫉妒提供的解决方案。 -大声笑-
@CodeMonkey.. 这就是为什么 SO 有时让我难过.. :(

【解决方案2】：

使用 JQuery，您可以将类添加到元素中：

$(element).on('hover', function() {
    // this if you're hovering over the element that would change, otherwise rename 'this' to whatever element class or id you want to change 
    $(this).addClass('NameOfClass');
});

然后您可以在 CSS 中使用该类

.NameOfClass {
    background-color: orange;
}

然后在需要时删除该类。

【讨论】：

【解决方案3】：

将.circle:hover 更改为.hover

.hover {
  background:orange;
  transition: all 0.5s ease
}

A) 如果你想要永远的橙色：

使用这个jquery

$(document).ready(function(){
    $('.circle').hover(function(){
        $(this).addClass('hover');
    })
})

$(document).ready(function(){
    $('.circle').hover(function(){
        $(this).addClass('hover');
    })
})

.container{
    background: white;
    display:flex;
    justify-content: center;
    align-items: center;
    height:50px
}

.circle {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #0f3757;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    margin-left:10px;
    float:left;
    transition: all 0.5s ease
}

.hover {
    background:orange;
    transition: all 0.5s ease
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class= "container">
  <span class="circle"></span>
  <span class="circle"></span>
  <span class="circle"></span>
  <span class="circle"></span>
</div>

B）如果你想要橙色直到鼠标移到其他圆圈上

使用这个jquery

$(document).ready(function(){
    $('.circle').hover(function(){
        $('.circle').removeClass('hover');
        $(this).addClass('hover');
    })
})

$(document).ready(function(){
    $('.circle').hover(function(){
        $('.circle').removeClass('hover');
        $(this).addClass('hover');
    })
})

.container{
    background: white;
    display:flex;
    justify-content: center;
    align-items: center;
    height:50px
}

.circle {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #0f3757;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    margin-left:10px;
    float:left;
    transition: all 0.5s ease
}

.hover {
    background:orange;
    transition: all 0.5s ease
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class= "container">
  <span class="circle"></span>
  <span class="circle"></span>
  <span class="circle"></span>
  <span class="circle"></span>
</div>

【讨论】：

【解决方案4】：

您可以在鼠标悬停时使用 Jquery 设置一个类。那么即使鼠标移开，类也会保持设置。

$(".circle").hover(function() {
    $(this).addClass("hovered");
});

I have created a jsfiddle to demonstrate.

【讨论】：

【解决方案5】：

$( ".circle" ).mouseover(function(){
    $(this).css('background','orange')
  }
)

https://jsfiddle.net/rtxq9fnu/

【讨论】：