CSS меню наведите один дочерний элемент и измените все остальные элементы одновременно

Question

CSS меню наведите один дочерний элемент и измените все остальные элементы одновременно

0

У меня проблема с меню... Я хочу, когда я навещу элемент <li> чтобы открыть раскрывающееся меню и сделать остальные элементы <li> 50% меньше в одно и то же время, только когда я навешиваю в конкретном <li> элемент. Я не знаю, объяснил ли я это хорошо, но вот код, который я сделал до сих пор, и скрипт js, чтобы увидеть его в действии... Я могу выполнить это только с элементом <li> который я навешиваю, но я хочу сделайте это и во всем остальном.

Код HTML:

<nav>
   <ul>
       <li><a href="#">1</a></li>
       <li class="a">
           <a href="#">2</a>
           <ul class="hide-menu a1">
               <li><a href="#">1-1</a></li>
               <li><a href="#">2-2</a></li>
               <li class="b">
                   <a href="#">3-3</a>
                   <ul class="hide-menu b1">
                       <li><a href="#">1-1-1</a></li>
                       <li><a href="#">2-2-2</a></li>
                       <li><a href="#">3-3-3</a></li>
                       <li><a href="#">4-4-4</a></li>
                   </ul>
                </li>
                <li><a href="#">4-4</a></li>
            </ul>
            </li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
    </ul>
</nav>

Код CSS:

nav {background-color:grey;width:200px;position:relative;}
ul {list-style:none;padding:0;margin:0;}
li{width:100%;background-color:red;margin-top:10px;text-align:center;padding:10px 0;}
a{text-decoration:none;}
.hide-menu {display:none;position:absolute;}
nav li.a:hover ul.a1 {display:block;}
nav li.b:hover ul.b1 {display:block;}
nav > ul > li.a:hover {width:50%;}
.a1{left:100px;top:39px;}
.b1{left:50px;top:99px;}
.a1 > li{background-color:purple;width:50px;}
.b1 > li{background-color:cyan;width:50px;}

и вот сценарий: http://jsfiddle.net/ELnX5/1/

Vaios P. 16 апр. 2014, в 15:23

Источник

1

Это звучит ужасно, но для этого потребуется Javascript / JQ.
Paulie_D 16 апр. 2014, в 13:47
1

Вы можете получить 2,3 и 4–50% с помощью общего селектора братьев и сестер «~»: nav> ul> li.a: hover ~ li {width: 50%;} Я не могу заставить 1 сделать то же самое .. Я бы использовал jQuery для этого.
Ruben Verschueren 16 апр. 2014, в 14:39
0

когда вы говорите на 50% меньше, что вы имеете в виду? Размер текста? ширина? Высота? общая шкала?
badAdviceGuy 16 апр. 2014, в 14:42
0

Вам просто нужен javascrpt, нет необходимости в jQuery
Zach Saucier 16 апр. 2014, в 15:31
0

@badAdviceGuy Я имею в виду ширину элемента. Спасибо всем за ваши ответы. Лучший ответ, который подходит для моей проблемы - это Ruben Verschueren и roastbeef, тогда я буду использовать javascript, как вы сказали, потому что я искал его немного больше, а css не может указывать на предыдущие элементы.
Vaios P. 16 апр. 2014, в 20:09

Показать ещё 3 комментария

Теги:

html

css

1 ответ

Ещё вопросы

Это звучит ужасно, но для этого потребуется Javascript / JQ.
Вы можете получить 2,3 и 4–50% с помощью общего селектора братьев и сестер «~»: nav> ul> li.a: hover ~ li {width: 50%;} Я не могу заставить 1 сделать то же самое .. Я бы использовал jQuery для этого.
когда вы говорите на 50% меньше, что вы имеете в виду? Размер текста? ширина? Высота? общая шкала?
Вам просто нужен javascrpt, нет необходимости в jQuery
@badAdviceGuy Я имею в виду ширину элемента. Спасибо всем за ваши ответы. Лучший ответ, который подходит для моей проблемы - это Ruben Verschueren и roastbeef, тогда я буду использовать javascript, как вы сказали, потому что я искал его немного больше, а css не может указывать на предыдущие элементы.

roasstbeef · Accepted Answer · 2014-04-16T14-08-00.000Z

как насчет этого?

http://jsfiddle.net/ELnX5/3/

nav {background-color:grey;width:200px;position:relative;}
ul {list-style:none;padding:0;margin:0;}
li{width:100%;background-color:red;margin-top:10px;text-align:center;padding:10px 0;}
a{text-decoration:none;}
.hide-menu {display:none;position:absolute;}
nav li.a:hover ul.a1 {display:block;}
nav li.b:hover ul.b1 {display:block;}
nav > ul > li.a:hover ~ li{width:50%;}
.a1{left:100px;top:39px;}
.b1{left:50px;top:99px;}
.a1 > li{background-color:purple;width:50px;}
.b1 > li{background-color:cyan;width:50px;}

Я немного отредактировал это так, чтобы он указывал и на второй элемент ... потому что так он указывает только на третий и четвертый элементы.