Question

我有一个父div，里面有两个子div，一个带有图像，一个带有文本。我已经为我的父类分配了一个：悬停样式，以便当用户悬停整个div时会得到一个插入阴影...但是当我测试它时，包含该图像的孩子不受影响或者位于顶部效果..

有没有办法让：悬停风格也能影响图像？

编辑用空div更新小提琴以说明所需的效果......

的CSS：

＆＃13;

.main-box {
    border:2px solid #656565;
}
.main-box:hover {
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.3) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.3) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.3) inset;
}

.image {
    display:inline-block;
}
.text {
    display:inline-block;
}

＆＃13;

<div class="main-box">
    <div class="image">
        <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQM2EEo-JUTyhdaFxM3UCMvTM-yotCWzz_v6XeCL6RIYMdY4ZjJ" />
    </div>
    <div class="text">asdfasfda;lskjf</div>
</div>

＆＃13;

Answer 1

解决方法实际上与您的解决方案相差不多，只需将CSS更改为

即可

.main-box:hover img {
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.3) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.3) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.3) inset;
}

效果应该是你想要的。

Updated fiddle to show results

修改

解决此问题的最佳方法是在CSS中添加：hover：before元素。这将在页面上的div上方创建新内容，只要用户的鼠标位于有问题的div上，并通过给它一个绝对位置和z-index，您添加到框中的所有效果将显示在上面的内容徘徊的div。

以下CSS将为您提供所需内容：

.main-box:hover:before { content: ""; display: inline-block; position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.3) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.3) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.3) inset; }

这种方法的问题在于：在内容现在有效地覆盖div中的所有内容之前;您希望用户能够选择的任何链接，输入字段或按钮现在都变得无用。

虽然指针事件是获取此新叠加层的最简单方法，但它具有糟糕的浏览器兼容性，因此我建议如下：

.main-box a, .main-box input { position: relative; z-index: 3; } // etc.

对于您希望用户能够选择的所有链接，文本或输入执行此操作应该是可点击的，并且此解决方案应该在所有浏览器上兼容。

Newer fiddle

父div的悬停属性不会影响子图像？

1 个答案: