CSS3中的悬停效应_Css - Fatal编程技术网

CSS3中的悬停效应

css

CSS3中的悬停效应,css,Css,我正在开发一个小的JSFIDLE，我几乎已经完成了，但是它有一个小问题，如果您注意到有两个悬停效果，请看下面： 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: -5

我正在开发一个小的JSFIDLE，我几乎已经完成了，但是它有一个小问题，如果您注意到有两个悬停效果，请看下面：

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

问题很明显，这将分别将阴影属性、顶部：-15px和底部边框应用于col-md-3，而不是img和span标记

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

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

多谢各位

乔塔姆

您需要将鼠标悬停添加到父对象：

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

您需要将鼠标悬停添加到父对象：

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

我希望：悬停效果在我悬停在

然后可以使用

：首先将

伪类悬停在

.col-md-3

上，并将其他两个元素作为目标，如下所示：

。下边框：悬停img{
顶部：-15px；
-网络工具包盒阴影：-5px44px 37px-13px rgba（0,0,0.5）；
-莫兹盒阴影：-5px44px37px-13pxRGBA（0,0,0.5）；
盒影：-5px44px37px-13pxRGBA（0,0,0.5）；
}
.下边框：悬停。fancyborder{
边框底部：5px实心#65d125；
}

HTML

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

注意：我使用了

.down border

选择器而不是

.col-md-3

来选择div元素，因为使用

.col-md-3

可能会影响其他列