Вызов <div>s в: hover selector

Question

Я бы хотел повлиять на несколько делений на одном :hover.Например, два элемента плавали влево и вправо друг от друга.Когда оператор :hover для одного из них активирован (или, возможно, для родительского элемента div), я бы хотел, чтобы они оба изменили ширину, цвет, прозрачность и т. Д.

<div id='maincontainer'>
    <div id='mainleft'>
     Left div that shrinks on maincontainer:hover
    </div>
    <div id='mainright'>
    Right div that grows on maincontainer:hover
    </div>
</div>

СделатьМне нужен контейнер Div для этого?Это возможно даже в одном только CSS?

Answer 1

просто используйте

#maincontainer:hover #mainleft { ... }
#maincontainer:hover #mainright { ... }

и измените свой CSS правильно. Это будет работать везде, кроме IE <7, который допускает <code>hover только для <a> элементов

Можно также подумать о том, чтобы запустить переход CSS в новом браузере, чтобы размер внутренних элементов div постепенно изменялся.

Answer 2

это то, как вы можете сделать это с помощью javascript
Я предпочитаю javascript, потому что старый браузер ограничивает наведение только тегами привязки

document.getElementById("maincontainer").onmouseover = func;

function func(event){
     document.getElementById("mainleft").style.width = newwidth + px;
     document.getElementById("mainright").style.width = newwidth + px;
}

Answer 3

С помощью этого CSS можно было бы

​#maincontainer:hover #mainleft{
 width: 100px;   
}

#maincontainer:hover #mainright{
 width: 200px;   
}
​

Answer 4

#maincontainer:hover #mainleft css селектор будет совпадать с mainleft div, когда maincontainer наведен.

Answer 5

попробуйте применить css для обоих:

#maincontainer > div:hover { *your css* }