CSS3中的悬停效果

Question

I was working on a small JSfiddle which i have almost completed , Jsfiddle here it has a glitch though , if you notice there are 2 hover effects , Look below :

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

and the 2nd hover effect here

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

this works perfectly fine . One problem though is that want the effect to take place as soon as i hover the entire .col-md-3 div ie i want both the :hover effects to fire as soon as i hover over the div.

The seemingly obvious solution : Now the seemingly obvious solution might be to do this

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

The problem with this is obvious , this will apply the shadow property , the top:-15px and border-bottom to col-md-3 rather than img and span tags respectively .

Is there any complex CSS selection here that i can apply or some intelligent HTML i can write that will acheive what i want to . I know i am missing something really tiny here , but i have't been able to spot what it is .

Please guide me . you help will be appreciated.

Thank you .

Gautam.

Answer 1

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

Then you could use :hover pseudo-class on .col-md-3 at first and target the two other elements as follows:

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

Note: I've used .down-border selector instead of .col-md-3 in order to select the div element because using .col-md-3 may affect the other columns.

EXAMPLE HERE

Answer 2

You need to add the hover to the parent:

.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

Change in the 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

Apply your style like below.

 .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