html - type - Al desplazar un elemento de la lista CSS, cambie los elementos principales CSS

ol html

Question

Tengo una lista de UL simple, cuando se desplaza sobre el elemento de la lista More en el HTML a continuación, muestra el menú secundario y lo muestra.

Lo que necesito hacer es cambiar el CSS del CSS de More una vez que se muestre el menú secundario y se coloque el cursor.

Por lo tanto, si se desplaza sobre More se muestra un menú secundario, luego se desplaza sobre ese menú secundario. En este punto, necesito cambiar el CSS del menú principal de este elemento secundario, que sería el menú que tiene More como texto.

Si sabes cómo hacer esto sin Javascript, me encantaría saber ... ¿Tal vez no sea posible sin JS?

 <div id="nav-wrapper">
<ul>
<li><a href="">Link</a></li>
<li><a href="">Link 5</a></li>
<li><a href="">More</a>
<ul>
<li><a href="">Sub Link 1</a></li>
<li><a href="">Sub Link 2</a></li>
<li><a href="">Sub Link 3</a></li>
<li><a href="">Sub Link 4</a></li>
<li><a href="">Sub Link 5</a></li>
</ul>
</li>
</ul>
</div>

El CSS

<style type="text/css" media="screen">
#nav-wrapper ul {
position:relative;
width: 700px;
float: right;
margin: 0;
list-style-type: none;
}
#nav-wrapper ul li {
vertical-align: middle;
display: inline;
margin: 0;
color: black;
list-style-type: none;
}
#nav-wrapper ul li a {
text-decoration: none;
white-space: nowrap;
line-height: 45px;
font-size: 13px;
color: #666;
padding: 5px 15px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#nav-wrapper ul li a:hover {
color: #fff;
background-color: #4caef2;
}
#nav-wrapper ul li a:visited {
color: #666;
}
/* Hide Sub-menus */
#nav-wrapper ul ul{
display: none;
}
/* SHOW Sub-menus on HOVER */
#nav-wrapper ul li:hover ul{
display: block;
margin:-10px 0 0 0;
padding:0px 20px 20px 20px;
border-color:#fff;
border:1px;
border-style:solid;
background:#FFF;
position:absolute;
top:45px;
right: 320px;
width: 420px;
}
</style>

Answer 1

Antigua pregunta, y la respuesta aceptada es inteligente. Pero esto es bastante trivial de lograr, con un solo cambio en tu CSS desde:

#nav-wrapper ul li a:hover

a:

#nav-wrapper ul li:hover>a

Esto no funcionará en IE6 (ese navegador solo entiende los estilos de desplazamiento en los anclajes). Pero tampoco lo hace el selector combinador de hermanos adyacente (+).

Vea este jsFiddle para la corrección en acción

Answer 2

Bueno, a pesar de lo que dicen estas otras respuestas, aquí hay una manera astuta de hacerlo usando el selector adyacente .

HTML:

<ul>
<li>
<ul>
<li>Sub Link 1</li>
<li>Sub Link 2</li>
<li>Sub Link 3</li>
</ul>
<a href="#">Menu</a>
</li>
</ul>

CSS:

* {
margin: 0;
padding: 0; }
ul { list-style: none; }
ul > li { position: relative; }
ul li a {
height: 16px;
display: block; }
ul ul {
position: absolute;
top: 16px;
left: 0;
cursor: pointer;
display: none; }
ul li:hover ul { display: block; }
ul ul:hover + a { color: red; }

Vista previa: http://jsfiddle.net/Wexcode/YZtgL/

Answer 3

La solución de @CherryFlavourPez anterior funciona. Sin embargo, la razón por la que funciona no se explica claramente. Tenga en cuenta que el elemento li (el que tiene el texto "Más") es un elemento principal del submenú (la ul con los cinco elementos li ). El elemento a es un hermano (adyacente) del submenú. Por lo tanto, cuando se desplaza sobre el submenú, también se desplaza sobre el elemento li principal.

Answer 4

No es posible seleccionar el elemento primario de un elemento mediante CSS. Tendrá que usar bibliotecas JavaScript o JavaScript como jQuery para implementar esto.

Esto podría ayudarte. Selector de CSS complejo para padre de hijo activo

Answer 5

No puede seleccionar elementos principales en CSS. Necesitará javascript / jQuery para lograr lo que desea.

Selectores CSS3 ...