Question

首先，我只是想说我是不一个程序员，但我正在尝试复制一个代码，因为我的javascript不是最好的我没有做到。

我尝试复制的css / java / wtv中的“动画”来自此网站上的3个第一个框链接： http://artcom.de

正如您在悬停盒子/链接时所看到的那样，它会一直悬停，直到鼠标移过另一个链接。

我找到了一些使用javascript来解决动画并使用.stop().animate(函数的解决方案但是这使得无法在其上编写css，其中一个事情是在悬停不同的链接时放置不同的背景图像（我可以让我只是不能把盒子悬停到下一个链接）。

如果您发现我的问题很多请求，请随时回答。这是我的第一篇文章，因为编码是我开始的事情，我觉得有点紧张地问这个问题。

提前感谢您的回复。

Answer 1

您可以使用以下内容在有效元素的鼠标悬停之后简单地应用'hover'类，从类似的限定条件中剥离它。可以使用transition

在CSS中处理动画

$('div').on('mouseover', function() {
  $('div').removeClass('hover');
  $(this).addClass('hover');
});

body {
  background: black;
}
div {
  transition: all 200ms ease-in;
  color: #fff;
  border: 3px solid #fff;
  width: 20%;
  display: inline-block;
  margin: 0 20px;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
}
.hover {
  color: #000;
  background: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>link</div>
<div>link</div>
<div>link</div>

Answer 2

我的解决方案类似于SW4，但提供的略有不同。基本上，当您将鼠标悬停在某个项目上时，您希望为其添加一个样式类，同时从所有其他（可能是之前悬停的）项目中删除该类。

FIDDLE - http://jsfiddle.net/44c9x5eb/2/

在我的小提琴中，我使用名为div的{{1}}项而不是样式化实际的身体元素。

<强> HTML

#body

<强> CSS

<div id='body'></div>

<div class="item" data-bg="http://www.evokia.com/images/large-background.jpg">1</div>
<div class="item" data-bg="http://p1.pichost.me/i/10/1333648.jpg">2</div>
<div class="item" data-bg="http://www.desktopaper.com/wp-content/uploads/wonderful-fish-wallpaper-large-background.jpg">3</div>
<div class="item" data-bg="http://p1.pichost.me/640/17/1397737.jpg">4</div>

<强>的jQuery

#body{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background-color:#eee;
    z-index:0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;  
    transition: all 350ms ease-in;     
}
.item{
    float:left;
    text-align:center;
    padding:20px;
    margin:0 8px;
    background:#f00;
    position:relative;
    z-index:100;
}
.item.selected{
    background:#0f0;
}

Answer 3

基本上你需要做两件事。

为定义的css中的所选按钮创建一个活动类背景颜色
绑定到悬停事件将类添加到悬停在按钮上并从其他按钮中删除该类。

这看起来像这样：

＆＃13;

$('button').hover(
  //this function is called on hoverin
  function() {
    //remove the css class from all buttons
    $('.active').removeClass('active');
    //add the class on the hovered over button
    $(this).addClass('active');
  },
  //this function is called on hoverin not needed in this case
  function() {}
);

＆＃13;

.active {
  background-color: white;
}
button {
  border: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>button1</button>
<button>button1</button>
<button>button1</button>

＆＃13;

请注意，在今天的环境中，许多移动设备都会被用来访问您的网站。因此，您不应该依赖悬停事件来构建实际功能。即：当您将鼠标悬停在菜单上时会打开的菜单。

让悬停留下来，直到下一个链接

3 个答案: