Question

确定。所以我正在为我的学校橄榄球队建立一个网站。现在，顶部的标志只是说＆＃34; Rugby，＆＃34;这是一个.png图像。我想做到这一点，当你将鼠标悬停在＆＃34;橄榄球＆＃34;它转移到正确的揭示＆＃34;学校名称＆＃34;在它的旁边。

当光标在徽标上时，我想让它读取＆＃34;学校名称橄榄球。＆＃34;当光标再次移动时，它会覆盖＆＃34;学校名称＆＃34;并且只读＆＃34;橄榄球＆＃34; 我想用图像而不是文字来做这件事。非常感谢！任何回应表示赞赏！

Answer 1

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

＆＃13;

div:hover a:first-child {
      margin-left: 475px;
    }

    a:first-child {
      z-index: 1;
      transition: 1s;
    }

    a {
      position: absolute;
      left: 10;
      top: 10;
    }

＆＃13;

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

＆＃13;

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

的JavaScript。将图像悬停在右侧显示图像上。

1 个答案: