CSS3中的懸停效果

Question

我正在研究一個即將完成的小型JSfiddle， 但是Jsfiddle在這里還是有毛刺的，如果您注意到有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;
}

這個問題很明顯，這將把shadow屬性，top：-15px和border-bottom分別應用於col-md-3而不是img和span標簽。

我可以在這里應用任何復雜的CSS選擇，還是可以編寫一些智能HTML來實現我想要的功能。 我知道我在這里遺漏了一些很小的東西，但是我沒能夠發現它是什么。

請指導我。 您的幫助將不勝感激。

謝謝 。

高塔姆。

Answer 1

我希望同時將：hover效果同時觸發<div class="col-md-3 ">

然后，您可以首先在.col-md-3上使用:hover偽類，並將其他兩個元素作為目標，如下所示：

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

注意：為了選擇div元素，我使用了.down-border選擇器而不是.col-md-3 ，因為使用.col-md-3可能會影響其他列。

這里的例子

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

小提琴

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