Question

This is my website: Gutdesign

Click TV on the left side. You see now list of projects. Everything is good for me, but how to make this orange arrows hide at start? I want to show them when user move mouse on this area (hover effect). But how?

CSS “display: none;” and then on hover “display: block;” styles doesn’t work 🙁 Any idea why?

Answer 1

Add opacity: 0 to .left_arrow and .right_arrow and then create a new rule, .left_arrow:hover and .right_arrow:hover, and add opacity: 1 to that rule.

// filter is used for IE8 and earlier 
.left_arrow, .right_arrow
{
    opacity: 0;
    filter: alpha(opacity = 0);
}
.left_arrow:hover, .right_arrow:hover
{
    opacity: 1;
    filter: alpha(opacity = 100);
}