Question

我研究了类似于我的其他问题并指出了正确的方向，但我相信我的情况有点不同。我是CSS的新手，请耐心等待我！我正在尝试制作悬停时互动的徽标。我已经取得了一些成功但是想要做得更好。徽标由两个图像组成，一个耙子和另一个图像，上面是文本。在悬停时，我希望耙子进行耙动，但文本保持静止。我已经成功地使rake（底部图像）在悬停时移动但是很难将光标放在rake（底部图像）被文本覆盖（顶部图像）我有这个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有悬停效果了吗？

感谢任何帮助！

Answer 1

你的问题不符合Q＆amp; A格式，但我觉得利他主义和制作an example to you

HTML观察

您应该使用背景图片而不是<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;
}

我希望我的回答可以帮助你

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

1 个答案:

HTML观察

CSS观察