Изменить размер div при наведении курсора на <li>

Question

Изменить размер div при наведении курсора на <li>

0

Всем доброе утро. Я создаю веб-сайт, и я не могу понять, возможно ли изменить размер div просто при наведении на "ли". На этой странице у меня есть меню с разными элементами, и я хочу изменить размер прозрачного окна в зависимости от выбранного элемента. Например, я хотел бы использовать одно и то же измерение для всех элементов, кроме последнего (синего), которые увеличивают размер окна от 250 до 350 пикселей. Это основной HTML-код:
...

<div class="menu_main">
            <ul class="menu slide">
            <li><a href="...." class="orange">NAME2</a></li>
            <li><a href="...." class="blue">NAME1</a></li>

    </ul>
    <div class="box"></div>
    </div>

...

И код CSS:

.....

.menu_main {
    float:left;
    font:normal bold 11px/35px verdana, sans-serif;
    overflow:hidden;
    position:relative;
    left:50px;
}


.menu_main .box {
    -moz-transition-duration:.4s;
    -o-transition-duration:.4s;
    -webkit-transition-duration:.4s;
    background-color:rgba(255, 250, 250, 0.5);
    height:0;
    width:900px;
}
.menu_main:hover div.box {
    height:250px;
}

....

.ul.menu li a.blue:hover,ul.menu li:hover a.blue {
    background:#c00;

}

....

Спасибо вам большое за ваше внимание. Надеюсь, я был ясен

user2348092 28 апр. 2014, в 17:45

Источник

0

Здравствуйте, сначала я предлагаю вам узнать о JSFiddle, если вам нужна дополнительная помощь от сообщества StackOverflow. Вам понравится это
Oliboy50 28 апр. 2014, в 15:06
1

Вы не можете изменить стиль элемента при наведении на другой элемент. Вам нужно будет склеить это поведение с помощью небольшого количества кода JavaScript.
PA. 28 апр. 2014, в 15:06
0

Похоже, что у вас работает. Поместите границу вокруг вашего div "box" и наблюдайте за изменением его высоты при наведении курсора на "menu_main". С этим «прозрачным» вы не можете сказать, что он меняется. jsfiddle.net/xLtdr
Tricky12 28 апр. 2014, в 15:08

Показать ещё 1 комментарий

Теги:

html

css

2 ответа

0

.main_menu:hover .blue {
    width: 350px;
    transition: width 1s;
}

davidcondrey 28 апр. 2014, в 13:37

0

Конечно, я пытался, но это не меняет размер "коробки", но размер <li> !!
user2348092 28 апр. 2014, в 15:41
0

Это то, что вы просили. Чтобы изменить размер коробки, замените .blue на .box
davidcondrey 28 апр. 2014, в 15:46
0

Но это последняя строка кода!
user2348092 28 апр. 2014, в 15:51

Показать ещё 1 комментарий

Ещё вопросы

Здравствуйте, сначала я предлагаю вам узнать о JSFiddle, если вам нужна дополнительная помощь от сообщества StackOverflow. Вам понравится это
Вы не можете изменить стиль элемента при наведении на другой элемент. Вам нужно будет склеить это поведение с помощью небольшого количества кода JavaScript.
Похоже, что у вас работает. Поместите границу вокруг вашего div "box" и наблюдайте за изменением его высоты при наведении курсора на "menu_main". С этим «прозрачным» вы не можете сказать, что он меняется. jsfiddle.net/xLtdr
Конечно, я пытался, но это не меняет размер "коробки", но размер <li> !!
Это то, что вы просили. Чтобы изменить размер коробки, замените .blue на .box

Shakesy · Accepted Answer · 2014-04-28T13-31-00.000Z

Я предлагаю включить jQuery в свой раздел, используя <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> который позволит вам использовать следующие кода для достижения того, что вы хотите сделать:

$('.blue').hover(function() {
$('.box').css(width: '350px');},
function() {
$('.box').css(width: '250px');};);