Question

我为这个问题创建了一个简单的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动画来解决问题吗？

Answer 1

只需向mouseover元素添加.circle事件，然后编写active具有background-color属性的CSS类，并在event发生时删除active来自任何.circle的类，并将其添加到当前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

Answer 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;
}

然后在需要时删除该课程。

Answer 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>

Answer 4

当鼠标悬停时，您可以使用Jquery设置类。然后，即使鼠标移开，该类仍将保持设置。

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

I have created a jsfiddle to demonstrate.

Answer 5

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

https://jsfiddle.net/rtxq9fnu/

如何在悬停之后保持悬停效果？

5 个答案: