При наведении элемента списка CSS измените родительские элементы CSS

У меня есть простой список UL, когда вы наводите курсор на элемент списка More в HTML ниже, он отображает его дочернее меню и показывает его.

Что мне нужно сделать, это изменить CSS фактического CSS More после того, как дочернее меню будет отображаться и зависеть.

Итак, если вы наведите курсор мыши на More, появится детское меню, затем вы наведите курсор мыши на это дочернее меню. На этом этапе мне нужно изменить CSS родителя этого дочернего меню, которое будет в меню с More как текст.

Если вы знаете, как это сделать без Javascript, я бы с удовольствием узнал.. Может быть, это невозможно даже без 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>

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>

Ответы

Ответ 1

Хорошо, несмотря на то, что говорят эти другие ответы, вот вроде бы подлый подход к этому, используя смежный селектор.

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; }

Предварительный просмотр: http://jsfiddle.net/Wexcode/YZtgL/

Ответ 2

Старый вопрос, и принятый ответ умный. Но это довольно тривиально для достижения, только с одним изменением в CSS:

#nav-wrapper ul li a:hover

to:

#nav-wrapper ul li:hover>a

Это не будет работать в IE6 (этот браузер только понимает стили наведения на якорях). Но тогда и селектор смежного смежного брата (+) не будет.

Смотрите этот jsFiddle для исправления в действии

Ответ 3

Вы не можете выбрать родительские элементы в CSS. Вам понадобится javascript/jQuery, чтобы выполнить то, что вы хотите.

селектор CSS3...

Ответ 5

Выполняется решение @CherryFlavourPez выше. Причина, почему это работает, не объясняется четко. Обратите внимание, что элемент li (тот, у которого есть текст "Дополнительно" ) является parent подменю (ul с пятью элементами li в нем). Элемент a является (смежным) sibling подменю. Поэтому, когда вы нависаете над подменю, вы все еще нависаете над родительским элементом li.

Ответ 6

Вы смотрите здесь CSS селекторы, и я отправляю пример для вас хорошего дня

.triggerDiv{
  display:none;
}
.child:hover ~.triggerDiv {
  display:block
}
<div class="main">
  <div class="parent">
    <div class="child">
      <p>Hello</p>
    </div>
    <div class="triggerDiv">
      <p>I'm Here</p>
    </div>
  </div>
</div>