CODEWITHSUNDEEP
csshoversliderfadein
Melody
Melody

Reputation: 11

CSS: Hover doesn't work on css slider

I'm trying to get the 'previous' and 'next' arrows of this pure css slider to "fade in" into a teal blue when people hover over it with their mouse (or when they tap on the arrows in the mobile version) since the default dark grey arrows don't show up that well in some photos. I've already prepared the teal blue image file, so it's just a matter of getting the hover and fade in css animation to work.

Here is a webpage that has the css slider: http://melodywai.com/sodium.html

And here is a snippet of the CSS stylesheet that relates to the arrows:

.carousel-wrapper { position: relative; }

.carousel-wrapper .carousel-item {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 padding: 25px 50px;
 opacity: 0;
 transition: all 0.5s ease-in-out;
 height: 500px;
 width: 750px;
 margin-left: auto;
 margin-right: auto;
 }

.carousel-wrapper .carousel-item .arrow {
position: absolute;
top: 50%;
display: block;
width: 50px;
height: 50px;
background: url("../prev.png") no-repeat;
z-index:999;
}

.carousel-wrapper .carousel-item .arrow.arrow-prev { left: 0; }

.carousel-wrapper .carousel-item .arrow.arrow-next {
right: 0;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}

I'm looking for suggestions on which class to target, or if, for some reason, hovers really can't work on this slider.

Thanks!

Upvotes: 1

Views: 110

Answers (2)

sharben
sharben

Reputation: 129

you can target them this way.

a.arrow.arrow-prev:hover {

}

a.arrow.arrow-next:hover {

}

to achieve this you must design the teal blue arrows with photoshop and on hover change the background image of the arrow container, for example:

a.arrow.arrow-prev:hover {
    transition: all 0.2s ease-in-out;                  // to give the "fade-in" effect
    background-image: url("arrow-teal-prev.png");      // to change the arrow img
}

a.arrow.arrow-next:hover {
   transition: all 0.2s ease-in-out;                  // to give the "fade-in" effect
   background-image: url("arrow-teal-next.png");      // to change the arrow img
}

this is a simple solution and it will look good with the transition effect.

Tell me if this helps you or you need more suggestions

Upvotes: 0

nitzanerman
nitzanerman

Reputation: 104

try adding

.carousel-wrapper .carousel-item .arrow:hover{
  //do something
  }

Upvotes: 1

Related Questions