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上时，我希望效果发生，即我希望两个：悬停效果一旦悬停在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;
}

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

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

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

谢谢。

高塔姆。

Answer 1

我想要两个：悬停效果在我悬停在上面时立即触发 <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可能会影响其他列。< / p>

<强> EXAMPLE HERE

Answer 2

您需要将悬停添加到父级：

.col-md-3: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);
}

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

Answer 3

Fiddle

改变CSS：

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


.col-md-3:hover img {
    top: -15px;
    /*background-color: red;*/
    -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);
}

Answer 4

如下所示应用你的风格。

 .col-md-3: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);
 }

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

DEMO

CSS3中的悬停效果

4 个答案: