css - How to alter the color of an HTML link when hovering over a list? -
in html5 code using lists create tabs in navigation bar.
<div id="nav_tabs"> <ul> <a href="index_v2.html"> <li> home </li> </a> <a href="#media"> <li> media </li> </a> <a href="#agenda"> <li> agenda </li> </a> </ul> </div> when user hovers on 1 of tabs background color , text color changes. however, media tab in list added drop-down menu. html is:
<a href="#media"> <li> media <ul class="submenu"> <a href="media_music.html"><li>music</li></a> <a href="media_photo.html"><li>photo</li></a> <a href="media_video.html"><li>video</li></a> <a href="media_band.html"><li>band</li></a> <a href="media_interview.html"><li>interviews</li></a> <a href="media_archive.html"><li>archive</li></a> </ul> </li> the drop down menu works , media tab background color changes white on hover supposed to. unfortunately, "media" text in tab remains original color.
this css handles change of color etc:
nav { width: auto; text-transform: uppercase; background: #ff4e00; height: 50px; } nav { color: white; } nav ul { list-style-type: none; margin: 0 auto; margin-left: 0px; } nav ul li { height: 35px; margin: 0px; padding-top: 15px; padding-left: 15px; padding-right: 15px; float: left; text-align: center; color: white; font-size: 26px; -webkit-transition: .2s linear; -moz-transition: .2s linear; -o-transition: .2s linear; -webkit-transition: .2s linear; -moz-transition: .2s linear; -o-transition: .2s linear; } #nav_tabs ul li:hover { background: white; color: #ff4e00; } .submenu { position: relative; width: 10px; top: 17px; right: 15px; padding: 0px; margin: 0px; display: none; background: black; } .submenu li { background: #ff4e00; width: 150px; } li:hover .submenu { display: block; } i trying "media" link text change same color others, since link/list order different doesn't work same. have tried use:
#nav_tabs ul a:hover { color: #ff4e00; } but changes color of text when user hovers on link/text. not change color of text when user hovers on tab looking for.
i managed recreate issue here in js bin. when user hovers on "media" tab, background of tab changes text-color not.
the short answer this:
instead of:
#nav_tabs ul a:hover { color: #ff4e00; } do this:
#nav_tabs ul:hover { color: #ff4e00; } you can place :hover on element in css selector chain, doesn't have go on last one. means when hover on ul, of child anchor tags styles.
but longer answer have poorly formatted html. have empty anchor tags floating in <ul> tags themselves, instead of wrapped in <li> elements. you've got anchor tags wrapping <li> elements rather inside of them.
this means whole cascading relationship going off. here revised html (i removed stuff simplicity, i'll let add in using new structure guide):
<body> <nav id="nav_tabs"> <ul> <li><a href="index_v2.html">home</a></li> <li> <a href="#media">media</a> <ul class="submenu"> <li><a href="media_music.html">music</a></li> </ul> </li> </ul> </nav> </body> and should able adjust css accordingly.
Comments
Post a Comment