Question

我一直在努力为我正在处理的网站上的所有图片定位链接，我遇到了jQuery.mouseenter的问题，然后用户将鼠标悬停在链接上。

我的代码：

jQuery('img').mouseenter(function(){ 
  jQuery('#hover').stop(true, false).fadeIn();
}).mouseleave(function(){
  jQuery('#hover').stop(true, false).fadeOut();
});

任何帮助都会很棒。

Answer 1

只需要添加一个东西，包括像图像过去的链接元素，见下面的代码：

jQuery('img, #link1').mouseenter(function(){ 
  jQuery('#hover').stop(true, false).fadeIn();
}).mouseleave(function(){
  jQuery('#hover').stop(true, false).fadeOut();
});

Answer 2

将其环绕在一个容器中并贴上它......

jQuery('#container').mouseenter(function(){ 
    jQuery('#hover').stop(true, false).fadeIn();
}).mouseleave(function(){
    jQuery('#hover').stop(true, false).fadeOut();
});

请参阅https://jsfiddle.net/167k701p/

Answer 3

如果您只是想创建一个悬停效果，我认为您最好使用纯CSS而不是jQuery。

这是使用CSS而不是jQuery的JSFiddle：

https://jsfiddle.net/69ysu5qd/

<强> HTML

<div id="to-hover">
<img src="http://lorempixel.com/400/200/"></img>
<div id="hover"><a id="link1">Link goes here</a></div>

<强> CSS

#hover {
   position: absolute;
   top: 20px;
   left: 20px;
   background-color: #FFF;
   transition: opacity 0.4s ease-out;
   opacity: 0; 
}

#to-hover:hover #hover{
     opacity: 1;
}

请查看此链接以供参考： https://css-tricks.com/almanac/properties/t/transition/

希望这会有所帮助;）

悬停共享链接的麻烦

3 个答案: