檢查代碼更改背景圖片與jquery的鏈接

我有這段代碼。這個想法是，當鼠標懸停在鏈接上時，div的背景圖像會改變，如果不是，則顯示原始圖像。我會用5個鏈接做到這一點，但目前我不能讓它工作甚至連一個。檢查代碼更改背景圖片與jquery的鏈接

SCRIPT JQUERY

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 

    $("#changebg").hover(
    function() { 
     //mouse over 
     $('.thediv').css('background-image', 'url("www.site.com/img/img2.png")'); 
    }, function() { 
     //mouse out 
     $('.thediv').css('background-image', 'url("www.site.com/img/img1.png")'); 
    }); 
}); 
</script>

CSS樣式

.thediv { position: relative; background-image:url('www.site.com/img/img1.png'); }

HTML代碼

<div class="thediv"> 

<div style="position: absolute;"> 
<a href="#" class="linkstyle" id="changebg">CHANGE</a> 
</div> 



</div>

和一個額外的......爲了讓SA我但5鏈接... EX：

<a href="#" class="linkstyle" id="changebg">CHANGE</a> 
<a href="#" class="linkstyle" id="changebg1">CHANGE</a> 
<a href="#" class="linkstyle" id="changebg2">CHANGE</a>

...

我要複製並粘貼相同的代碼或者是有一種更好的方式來做到這一點？

非常感謝：D

祝您有個美好的一週。

來源

2015-06-15 User2015learn

問題可能與'div.thediv'沒有高度或寬度這一事實有關。絕對定位的孩子將從文檔流中移除，因此其父項會崩潰，並且背景圖像不會顯示。這是你遇到的問題嗎？ – showdev

呃...我想是這樣！我需要尊重兩個位置的設計，所以我不能改變它們。但是，是的......當我把鼠標放在LINK上時，DIV上沒有圖像，當我放棄它時，仍然是一樣的。感謝您的時間：D – User2015learn

我認爲這可能有助於描述您的背景。你打算完成什麼？所有鏈接看起來是否相同，並且每個鏈接都將以相同方式更改？或者他們是否會像縮略圖一樣，每個人都有不同的圖像？有沒有理由不使用CSS？ – showdev

您需要設置的高度和寬度上.theDiv像這樣：

.thediv { 
    position: relative; background-image:url('http://fpoimg.com/300x250'); 
    width:500px; 
    height:500px; 
}

here是一個工作的例子。此外，您的示例圖像沒有工作（他們實際上不，據我可以告訴有），所以我改變他們的一些填充的圖像，所以你可以看到我的作品例如利用

來源

2015-06-16 00:02:52 HelloWorld

嘗試:hover

.thediv { 
 
    height: 50px; 
 
    width: 50px; 
 
    position: relative; 
 
    background-image: url('http://lorempixel.com/50/50/cats'); 
 
    top: 0px; 
 
} 
 
a[id^="changebg"]:hover { 
 
    color: transparent; 
 
    position: absolute; 
 
    height: 50px; 
 
    width: 50px; 
 
    background-image: url('http://lorempixel.com/50/50/technics'); 
 
    z-Index: 1; 
 
    top: 0px; 
 
    transition: top 1ms linear; 
 
}

<div class="thediv"> 
 
    <div style="position: absolute;"> 
 
    <a href="#" class="linkstyle" id="changebg">CHANGE</a> 
 
    <a href="#" class="linkstyle" id="changebg1">CHANGE</a> 
 
    <a href="#" class="linkstyle" id="changebg2">CHANGE</a> 
 
    </div> 
 
</div>

來源

2015-06-16 00:11:23 guest271314

我相信他希望'.thediv'的背景可以在懸停鏈接的同時進行更改。所以在我們獲得父母選擇器之前，這是行不通的。編輯：當然，除非他能像你一樣做，並用鏈接覆蓋整個div。但是，如果情況是這樣的話，所有的div都有什麼意義呢？ – powerbuoy

檢查代碼更改背景圖片與jquery的鏈接

回答

相關問題