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

Question

我有一个父 div，其中有两个子 div，一个带有图像，一个带有文本。我已经为我的父类分配了一个 :hover 样式，这样当用户悬停整个 div 时，就会得到一个嵌入的阴影......但是当我测试它时，包含图像的子元素要么不受影响，要么位于顶部效果..

有没有办法让 :hover 样式也影响图像？

更新fiddle

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

css:

.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;
}

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

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;
}

这种方法的问题是:before 内容现在有效地覆盖了 div 中的所有内容；您希望用户能够选择的任何链接、输入字段或按钮现在都变得无用了。

虽然指针事件是通过这个新叠加层最简单的方法，但它的浏览器兼容性很差，所以我推荐以下方法：

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

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

Newer fiddle