使悬停保持悬停直到下一个链接[关闭]

Question

首先只想说我不是程序员，但我正在尝试复制代码，因为我的 javascript 不是最好的，所以我失败了。 p>

我试图复制的 css/java/wtv 中的“动画”来自该站点上的前 3 个框链接： http://artcom.de

正如您所看到的，当您将框/链接悬停时，它会一直悬停，直到鼠标移过另一个链接。

我找到了一些带有 javascript 的解决方案，这些解决方案包含动画并使用 .stop().animate( 函数，但这使得无法在其上编写 css 代码，其中之一是当悬停不同的链接时放置不同的背景图像（我可以让我无法将框悬停在下一个链接之前）。

如果您发现我的问题与大部分请求有关，请随时不回答。这是我的第一篇文章，因为编码是我开始的一件事，所以我对提出这些问题感到有点紧张。

提前感谢您的任何回复。

Answer 1

您可以使用以下内容在有效元素的鼠标悬停上简单地应用“悬停”类，然后将其从类似的合格元素中剥离。可以使用 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/

在我的小提琴中，我使用了一个名为 #body 的 div 项目，而不是为实际的 body 元素设置样式。

HTML

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

CSS

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

jQuery

$('.item').mouseover(function(){

    //If this item is already selected, forget about it.
    if ($(this).hasClass('selected')) return;

    //Find the currently selected item, and remove the style class
    $('.selected').removeClass('selected');

    //Add the style class to this item
    $(this).addClass('selected');

    //set the body to a different image
    $('#body').css( 'background-image', 'url(' + $(this).data('bg') + ')' );
});

Answer 3

基本上你需要做两件事。

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

这看起来像这样：

$('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() {}
);

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

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

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