css - CSS3 中的悬停效果

Question

我正在研究一个我几乎已经完成的小型 JSfiddle，Jsfiddle here虽然它有一个小故障，如果您注意到有 2 个悬停效果，请看下面:

img {
    -webkit-transition: all .4s ease-out 0s;
    -moz-transition: all .4s ease-out 0s;
    transition: all .4s ease-out 0s;
    position: relative;
    top: 0px;
    -webkit-box-shadow: -5px 34px 37px -13px rgba(0,0,0,0.8);
    -moz-box-shadow: -5px 34px 37px -13px rgba(0,0,0,0.8);
    box-shadow: -5px 34px 37px -13px rgba(0,0,0,0.8);
}
img:hover {
    top: -15px;
    -webkit-box-shadow: -5px 44px 37px -13px rgba(0,0,0,0.5);
    -moz-box-shadow: -5px 44px 37px -13px rgba(0,0,0,0.5);
    box-shadow: -5px 44px 37px -13px rgba(0,0,0,0.5);
}

第二个悬停效果在这里

.fancyborder {
    -webkit-transition: all .4s ease-out 0s;
    -moz-transition: all .4s ease-out 0s;
    transition: all .4s ease-out 0s;
    border-bottom: 5px solid #444;
}
.fancyborder:hover {
    border-bottom: 5px solid #65d125;
}

这很好用。但有一个问题是，我希望效果在我悬停整个 .col-md-3 div 时立即发生，即我希望 :hover 效果在我悬停在 div 上时立即触发。

看似显而易见的解决方案:现在看似显而易见的解决方案可能是这样做

.col-md-3 {
    top: -15px;
    -webkit-box-shadow: -5px 44px 37px -13px rgba(0,0,0,0.5);
    -moz-box-shadow: -5px 44px 37px -13px rgba(0,0,0,0.5);
    box-shadow: -5px 44px 37px -13px rgba(0,0,0,0.5);
    border-bottom: 5px solid #65d125;
}

这个问题很明显，这会将阴影属性、top:-15px 和 border-bottom 分别应用到 col-md-3 而不是 img 和 span 标签。

这里是否有我可以应用的任何复杂的 CSS 选择或我可以编写的一些智能 HTML 来实现我想要的。我知道我在这里遗漏了一些非常微小的东西，但我无法发现它是什么。

请指导我。你的帮助将不胜感激。

谢谢。

高塔姆。

Answer 1

I want both the :hover effects to fire as soon as i hover over the <div class="col-md-3 ">

然后你可以使用:hover .col-md-3 上的伪类首先定位另外两个元素，如下所示:

.down-border:hover img {
    top: -15px;
    -webkit-box-shadow: -5px 44px 37px -13px rgba(0,0,0,0.5);
    -moz-box-shadow: -5px 44px 37px -13px rgba(0,0,0,0.5);
    box-shadow: -5px 44px 37px -13px rgba(0,0,0,0.5);
}

.down-border:hover .fancyborder {
    border-bottom:5px solid #65d125;
}

HTML

<div class="col-md-3 down-border">

注意:我用过.down-border选择器而不是 .col-md-3为了选择 div 元素，因为使用 .col-md-3可能会影响其他列。

EXAMPLE HERE