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