0

我研究了与我类似的其他问题，并指出了正确的方向，但我相信我的情况有点不同。我是 CSS 新手，所以请多多包涵！我正在尝试制作一个悬停时可交互的徽标。我取得了一些成功，但希望做得更好。徽标由两个图像组成，一个是耙子，另一个是顶部的文本图像。在悬停时，我希望耙子做一个耙子动作，但让文本保持静止。我已经成功地使耙子（底部图像）在悬停时移动，但是很难将光标放在耙子（底部图像）上被文本（顶部图像）覆盖我有这个 HTML：

<div id="container">
<div class="logo">
    <img src="rake-logo-top.png" width="214" height="170" />
</div>
<div class="vertpan pic">
    <img src="rake-logo-bottom.png" >
</div>
</div>

CSS：

#container {
height:304px;
width: 246px;
margin: 20px;
cursor: pointer;
}

.logo {
    position: absolute;
    z-index: 2;
    padding-top: 105px;
    padding-left: 15px;
}

.pic {
  height: 304px;
  width: 246px;
  overflow: hidden;
}

/*VERTPAN*/
.vertpan img {
  position: relative;   
  margin-top: 100px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
  z-index: 1;
}

.vertpan img:hover {
  margin-top: 0px;
}

我知道这可以通过以下方式来完成：

#container:hover + vertpan img {
  margin-top: 100px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
  z-index: 1;
}

但这并不完全正确。“vertpan”代码已预先格式化，我正在更改它。基本上，我想将鼠标悬停在#container 或 .logo 上，并且与仅悬停在 .pic 上时的反应相同。我试了几次都卡住了……是不是因为我已经在 .pic 上有了悬停效果？

任何帮助表示赞赏！

4

1 回答 1

1

你的问题不符合问答形式，但我觉得很利他，给你做了一个例子

HTML 观察

  • 您应该使用 background-images 代替<img>标签来实现此效果，从语义上讲，图像不是内容。
  • 如果徽标有文本层，那么您应该明确地使用文本。

  • 我假设您正在使用cursor: pointer，因为您正在链接到某个地方 - 也许是网站主页 - 所以我建议为容器使用<a>标签。

    <a id="logo" href="#">
    <div class="text">Logo text</div>
    <div class="background"></div>
</a>

CSS观察

  • 您的定位过于复杂，您的示例将难以集成。
  • 尝试对背景图像而不是容器使用绝对定位，请参阅我的示例。

  • 如果transition为状态定义行为，则:hover此行​​为不会影响处于其他状态的元素。

    /**
 * Make logo width responsive to its text,
 * while staying as block.
 * Any absolute content will be relative to this
 * Remove the default underline for the <a> tag
 */
#logo {
    display: inline-block;
    position: relative;
    text-decoration: none;
}
/**
 * place the background layer on 0,0
 * make them responsive to parent width and height
     * correct the z-index to display it behind the text
 * set transition time and easing
 */
#logo .background {
    position: absolute;
    top: 0; left: 0; 
    width: 100%;
    height: 100%;
    z-index: -1;
    -webkit-transition: all .5s ease;
}
/**
 * Just decoration for prettyness:
 * - Background image
 * - Text color
 * - Set a size which fits the bg image aspect ratio
 */
#logo .background {
    background: url("http://lorempixel.com/g/214/170/abstract/1") no-repeat;
    background-size: contain;
}
#logo .text {
    color: gold;
    width: 214px; height: 170px;
}
#logo:hover .background {
    margin-top: -20px;
}

希望我的回答对你有帮助

于 2013-06-07T01:49:21.847 回答