Changing the :after property with :hover on another element

StackOverflow https://stackoverflow.com/questions/20988643

  •  25-09-2022
  •  | 
  •  

Pregunta

I want to change the color of the "Green" backline while hovering the menu items. The color will be changed according to the hovered menu item; i.e. when hovering on the first item, the backline color will be that "Bluish". How can I get this effect? Here is my JSFiddle: http://jsfiddle.net/n86UN/embedded/result/

Also, How can I set the 'span' elements(hovered effect) always right under the respective color blocks if I change the width or height of the blocks. As you see I have changed the width & height of the blocks from 120px to 150px. And the span elements are appearing haphazardly. Thank U in advance...

Here is my code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Flat Nav</title>

<style type="text/css" media="screen">

nav{
    position: relative;
    text-align: center;
}
nav:after {
    content: "";
    width: 100%;
    height: 2px;
    background-color: green;
    position: absolute;
    right: 0;
    top: 50%; /* 50% from the top */
    z-index: -1;
}

nav ul {
    display: inline-block; list-style: none; position: relative;
}
    nav ul li {
        float: left; margin: 0 20px 0 0;
    }
        nav ul li a {
            display: block; width: 150px; height: 150px; opacity: 0.9;
        }
            nav ul li:nth-child(1) a {
                background-color: #5bb2fc;
            }
            nav ul li:nth-child(2) a {
                background-color: #58ebd3;
            }
            nav ul li:nth-child(3) a {
                background-color: #ffa659;
            }
            nav ul li:nth-child(4) a {
                background-color: #ff7a85;
            }

                nav ul li a span {
                    font: 20px "Dosis", sans-serif; text-transform: uppercase; 
                    display: none;
                }
                    nav ul li a:hover span {
                        display: block;
                    }

                nav ul li:nth-child(1) a span {
                    color: #5bb2fc;
                    position: absolute; left: 70px; top: 160px;
                }
                nav ul li:nth-child(2) a span {
                    color: #58ebd3;
                    position: absolute; left: 200px; top: 160px;
                }
                nav ul li:nth-child(3) a span {
                    color: #ffa659;
                    position: absolute; left: 320px; top: 160px;
                }
                nav ul li:nth-child(4) a span {
                    color: #ff7a85;
                    position: absolute; left: 470px; top: 160px;
                }
</style>

</head>
<body>

<div id="demo">
    <nav>
        <ul>
            <li>
                <a href="#">
                    <span>Home</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>About</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>Portfolio</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>Contact</span>
                </a>
            </li>

        </ul>
    </nav>
</div>

</body>
</html>
¿Fue útil?

Solución

A working example on JSFiddle. It works in Chrome 32.0.1700.68 beta and Safari 7.0.1. I don't know if this works in any other browsers.

<body>
    <div id="demo">
        <nav>
            <ul>
                <li> 
                    <a class="nav nav-blue" href="#">
                        <span class="label-wrapper">
                            <span class="label">Home</span>
                        </span>
                        <span class="nav-after"></span>
                    </a>
                </li>
                <li> 
                    <a class="nav nav-green" href="#">
                        <span class="label-wrapper"> 
                            <span class="label">About</span>
                        </span>
                        <span class="nav-after"></span>
                    </a>

                </li>
                <li> 
                    <a class="nav nav-yellow" href="#">
                        <span class="label-wrapper"> 
                            <span class="label ">Portfolio</span>
                        </span>
                        <span class="nav-after"></span>
                    </a>
                </li>
                <li> <a class="nav nav-red" href="#">
                        <span class="label-wrapper"> 
                            <span class="label">Contact</span>
                        </span>
                    <span class="nav-after"></span>
                    </a>

                </li>
            </ul>
        </nav>
    </div>
</body>

CSS:

nav {
    position: relative;
    text-align: center;
}
nav:after, .nav-after {
    content:"";
    width: 100%;
    height: 2px;

    position: absolute;
    right: 0;
    top: 50%;
    /* 50% from the top */
}

nav:after {
    background-color: green;
    z-index: 1;
}

nav ul {
    display: inline-block;
    list-style: none;
}
nav ul li {
    float: left;
    margin: 0 20px 0 0;
}

.nav {
    z-index:100;
    width: 150px;
    height: 150px;
    display:block;
}

.label-wrapper {
    position:relative;
    width: 150px;
    height: 150px;
    opacity: 0.9;
    display:block;
    z-index:100;
}

.label {
    position: absolute;   
    top: 160px;
    left: 10px;
    font: 20px"Dosis", sans-serif;
    text-transform: uppercase;
    display: none;
}
.nav:hover .label {
    display: block;
}
.nav:hover .nav-after {
    display:block;
     z-index: 10;
}

/* Colors */
.nav-blue .label-wrapper, .nav-blue:hover .nav-after  {
    background-color: #5bb2fc;
}
.nav-blue .label {
    color: #5bb2fc;
}

.nav-green .label-wrapper, .nav-green:hover .nav-after {
    background-color: #58ebd3;
}
.nav-green .label {
    color: #58ebd3;
}

.nav-yellow .label-wrapper, .nav-yellow:hover .nav-after {
    background-color: #ffa659;
}
.nav-yellow  .label {
    color: #ffa659;
}

.nav-red .label-wrapper, .nav-red:hover .nav-after {
    background-color: #ff7a85;
}
.nav-red .label {
    color: #ff7a85;
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top