使悬停保持悬停状态，直到下一个链接

Make an hover stay hovered until next link

本文关键字：悬停 下一个 链接 状态      更新时间：2023-09-26

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

我尝试复制的css/java/wtv中的"动画"来自本网站上的前3个框链接：http://artcom.de

如您所见，当您将鼠标悬停在框/链接上时，它会一直悬停，直到鼠标越过另一个链接。

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

如果您发现我的问题有很多要求，请随时不回答。这是我的第一篇文章，由于编码是我开始的事情，我对问这个问题感到有点紧张。

提前感谢您的任何回复。

您可以使用下面的方法在将有效元素的鼠标悬停上简单地应用"悬停"类，然后将其从类似的限定元素中剥离出来。可以使用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>

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

小提琴 - http://jsfiddle.net/44c9x5eb/2/

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

.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') + ')' );
});

基本上你需要做两件事。

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

这将看起来像这样：

$('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>

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

相关文章：