Изменить фоновое изображение div при наведении курсора на ссылку - PullRequest
Новая
       0

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

3 голосов
/ 11 сентября 2011

Чего я хочу добиться

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

Пример 

<div id="container">
     <a href="" id="linktomouseover"></a>
</div>

Что я пробовал

Я пытался поменять фоновое изображение с помощью jQuery: 

<script language="javascript" type="text/javascript">

jQuery('#linktomouseover').mouseover(function()
{
jQuery('#container').css("background-image", "url(bg-b.png)");
});

</script>

Может кто-нибудь посоветовать мне, что мне не хватает?

Решение 

<style> 
#container{ 
width:100%; 
height:100%; 
background-image:url(http://thumbs.dreamstime.com/thumblarge_536/12838649102C1cO5.jpg); 
} 
</style> 

<div id="container"><br><br> 
<a href="" id="linktomouseover">hover</a> 
</div>

<script> 
jQuery('#linktomouseover').hover(function() 
{ 
jQuery('#container').css("background-image", 
"url(http://static4.depositphotos.com/1011237/285/i/450/dep_2853473-Background-for-your-web-store.jpg)
"); 
}).mouseleave(function(){
jQuery('#container').css("background-image", "url(http://thumbs.dreamstime.com/thumblarge_536/12838649102C1cO5.jpg)"); 
});
</script>

Ответы [ 2 ]

5 голосов
/ 11 сентября 2011

отсутствует идентификатор = 

<div id="container">

не 

<div="container">

, а также переключите .click () с помощью .hover (), как указывает ссылка

http://sandbox.phpcode.eu/g/31e7b/6

<style> 
#container{ 
        width:100%; 
    height:100%; 
    background-image:url(http://thumbs.dreamstime.com/thumblarge_536/12838649102C1cO5.jpg); 
} 
</style> 
<div id="container"><br><br> 
     <a href="" id="linktomouseover">hover</a> 
</div> 
<script> 
jQuery('#linktomouseover').hover(function() 
{ 
    jQuery('#container').css("background-image", "url(http://static4.depositphotos.com/1011237/285/i/450/dep_2853473-Background-for-your-web-store.jpg)"); 
}); 
</script>
1 голос
/ 11 сентября 2011

Возможно, это не решение проблемы, но вы не запускаете свой код после загрузки dom-модели, что, вероятно, означает, что jQuery ('# linktomouseover') ничего не возвращает.

Попробуйте это: 

<script>
jQuery(function() {
    // Your code here
});
</script>

Кроме того, если вы хотите использовать этот эффект для нескольких ссылок, вы можете сделать это следующим образом:

html: 

<div class="container">
    <a class="linktomouseover">link</a>
</div>
<div class="container">
    <a class="linktomouseover">link</a>
</div>

js:

jQuery(function() {
    jQuery('.linktomouseover').mouseover(function() {
        jQuery(this).parent().css('background-image', "url('bg-b.png')");
    });
});
...