html - 悬停在一个 div 上会影响另一个

Question

我研究了与我类似的其他问题，并指出了正确的方向，但我相信我的情况有点不同。 我是 CSS 的新手，所以请多多包涵! 我正在尝试制作一个悬停时可交互的 Logo 。我取得了一些成功，但想做得更好。 Logo 由两个图像组成，一个耙子和另一个图像，上面是文字。悬停时，我希望耙子做出倾斜 Action ，但让文本保持静止。我已经成功地使耙子(底部图像)在悬停时移动但是很难将光标放在文本(顶部图像)覆盖的耙子上(底部图像)我有这个 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 上时相同的 react 。 我试了几次都卡住了...是因为我已经在 .pic 上有悬停效果了吗？

感谢任何帮助!

Answer 1

你的问题不符合问答形式，但我觉得利他主义，所以做了 an example to you

HTML 观察

• 你应该改用背景图片<img>这种效果的标签，从语义上讲，图像不是内容。
• 如果 Logo 有文本层，那么您应该明确地为其使用文本。

• 我假设您使用的是 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;
  }
  

希望我的回答对你有帮助