Javascript。将鼠标悬停在右侧显示图像的图像上。

问题描述：

好的。所以我正在为我的学校橄榄球队制作一个网站。现在上面的标志只是说“橄榄球”，它是一个.png图像。我想这样做，当你将鼠标悬停在“橄榄球”上时，它会转移到右边，显示旁边的“学校名称”。Javascript。将鼠标悬停在右侧显示图像的图像上。

当光标在标志上我想让它读“学校橄榄球名字。”当光标再次移动它覆盖了“学校名称”，只是读“橄榄球” 我想用图像而不是文字做这个。非常感谢！任何回应表示赞赏！

我需要把整个事情可以点击如以及因为我使用它作为主页按钮。我宁愿如果这是做动画，所以它慢慢转变。不是一次全部。 – gprosser

请给我们一个https://jsfiddle.net/与您现有的代码。 –

告诉我们您尝试了些什么会很有帮助。请参阅[此处如何提问]（http://stackoverflow.com/help/mcve）。 – PSWai

答

不需要JavaScript或jQuery。你基本上只需要两个图像在同一个容器中。确保顶部的有更高的z-index。您需要在包含元素上设置一个hover状态，同时选择覆盖图像（我做了a标记，因为您声称它需要点击。然后，您只需使用margin-left属性将其向右移动即可。。图像的宽度使其滑动，只需使用一个transition property事情是这样的：

div:hover a:first-child { 
 
     margin-left: 475px; 
 
    } 
 

 
    a:first-child { 
 
     z-index: 1; 
 
     transition: 1s; 
 
    } 
 

 
    a { 
 
     position: absolute; 
 
     left: 10; 
 
     top: 10; 
 
    }

<div> 
 
     <a href="#"> 
 
     <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"> 
 
     </a> 
 
     <a href="#"> 
 
     <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"> 
 
     </a> 
 
    </div>

这里有一个的jsfiddle它：http://jsfiddle.net/salexzee/c0y1za2t/

我也将它们定位在绝对位置，以便它们可以设置到完全相同的位置。如果尺寸相同，这也很有用。但如果它们不同，显然覆盖图像需要更大，并且您必须找出定位测量值。 – Sam

非常感谢。这是我寻找的100％！ – gprosser

@downvoter请解释你的downvote。 – Sam

Javascript。将鼠标悬停在右侧显示图像的图像上。

相关推荐