Хотите изменить фон div при наведении другого div в css3 - PullRequest
Новая
       6

Хотите изменить фон div при наведении другого div в css3

3 голосов
/ 25 января 2012

Я хочу изменить фон Div при наведении курсора на другой Div, и я попробовал

HTML5 часть: 

<nav>
<div id="nav1"></div>
<a href="#"><div id="nav2"></div></a>
<a href="#"><div id="nav3"></div></a>
<a href="#"><div id="nav4"></div></a>
<a href="#"><div id="nav5"></div></a>
<a href="#"><div id="nav6"></div></a>
<div id="nav7"></div>
</nav>
<article>
<div id="nav8"></div>
</article>

И CSS, который я пробовал, 

#nav2
{
float:left;
height:429px;
width:34px;
background:url(images/nav_02.gif) no-repeat;
}
#nav2:hover #nav8
{
float:left;
height:429px;
width:445px;
background:url(images/nav_08-nav_02_over.jpg) no-repeat;
}

Но это не работает ... Мне нужно сделать это с помощью CSS только без JavaScript ..

Ответы [ 5 ]

2 голосов
/ 25 января 2012

Способ работы селекторов CSS: Parent > Descendant

Когда вы делаете 

#nav2:hover #nav8

Это означает, что # nav8 является потомком # nav2, что не так в вашей разметке, поэтому правило не применяется

Вы должны использовать javascript, чтобы делать то, что вы ищете.

1 голос
/ 25 января 2012

Используйте этот код Jquery: 

<script type="text/javascript">
$(document).ready(function(){
$("#nav2").hover(function(){

    $("#nav8").css("background-image","url(images/nav_08-nav_02_over.jpg)");
    },function(){
    $("#nav8").css("background-image","");
});
});
</script>
1 голос
/ 25 января 2012

Это невозможно. Вы можете изменить фон самого элемента div и любого дочернего элемента div, когда вы наводите его, но с помощью элемента «брат / сестра» / «совершенно не связанный» - никак.

Однако вы можете сделать это в jQuery.

Пример: 

$("#nav2").mouseover(function() { 
    $("#nav8").addClass("someClassName");
});
$("#nav2").mouseout(function() { 
    $("#nav8").removeClass("someClassName");
});

А затем подключите это фоновое изображение к # nav8.someClassName.

0 голосов
/ 25 января 2012

невозможно, если ваши div не братья и сестры, поэтому вы можете добиться эффекта, используя

+ селекторы соседних братьев и сестер (css2) или
~ общий комбинатор братьев и сестер (css3)

например. если ваша разметка структурирована таким образом 

<div id="nav1"></div>
<div id="nav2"></div>
...
<div id="nav9"></div>

Вы можете применить некоторый стиль к nav2 зависанию nav1 с помощью 

#nav1:hover + #nav2 { ... }

, потому что nav2 является непосредственным (смежным) братом nav1 (в этом случае + или ~ будет иметь тот же эффект), или вы можете сделать то же самое при nav9 зависании nav1 с 

#nav1:hover ~ #nav9 { ... }

(здесь вы можете использовать только селектор ~.) Также обратите внимание, что эти селекторы доступны во всех современных браузерах, включая Internet Explorer 7+, см. http://html5please.us/#gtie6

0 голосов
/ 25 января 2012

В CSS3 нельзя добавлять эффекты к тегам того же уровня. При наведении на родительский тег только дочерние теги могут иметь разные CSS.

...