HTML OnMouseOver與列表圖像

-1

我真的很陌生，所以如果有人能夠幫助我們非常感謝 - 我有2個問題。HTML OnMouseOver與列表圖像

首先我想：

<a href="Streaming.html"> 
    <li> 
    <img Src="Streaming.jpg" onmouseover="this.src='HoverStreaming.jpg'; this.height='90px';"; onmouseout="this.src='Streaming.jpg'; this.height='75px';"; width="140" height="75"> 
    </li> 
</a>

這個工作對改變形象，但似乎並沒有爲工作高度。

因爲它是在一個列表和DIV是塊級的，我不使用它，但是我試圖把一個ID的圖像和使用JQuery使用<script type="text/javascript" src="ArchDragonJQuery.js"></script>我的html連接到我的其他文件，並使用：

$(document).ready(function(){ 
    $("#Bigger").mouseenter(function(){ 
     $(this).animate({ 
      height: "+=30px" 
     }); 
    }); 
    $("#Bigger").mouseleave(function(){ 
     $(this).animate({ 
      height: "-=30px" 
     }); 
    }); 
});

我已經嘗試了一些東西，而不是ID，但我仍然無法完成任何操作。

所以我想知道A-如何讓懸停的大小增加，而B-是我的jQuery代碼根本沒有正確鏈接到HTML？如果是的話我該如何解決這個問題？

感謝

來源

2014-11-24 Archael

從我可以告訴，你需要使圖像具有960x75像素的高度，當鼠標懸停，你想要的形象改變，並具有90像素的高度。您可以使用懸停選擇器僅使用CSS完成「增長」效果。

.hoverGrow img {height:75px; transition:height .4s ease;} 
 
.hoverGrow img:hover {height:90px;}

<a href="Streaming.html"> 
 
    <li class="hoverGrow"> 
 
     <img src="http://placekitten.com/g/200/300" onmouseover="this.src='http://placekitten.com/g/300/200';"; onmouseout="this.src='http://placekitten.com/g/200/300';"> 
 
    </li> 
 
</a>

來源

2014-11-24 16:59:15 Marcelo

由於這徹底解決了我的問題。仍然對我的JQuery感到好奇（Litteraly剛剛開始JQuery和它的確令人困惑） – Archael 2014-11-24 17:30:04

我沒有看到jQuery代碼的真正問題。如果我不得不猜測，你在HTML中給圖像元素的ID與你在jQuery函數的選擇器中的ID不匹配（ID區分大小寫）。 – Marcelo 2014-11-24 17:35:35

this.height總是以像素爲單位的高度。這是一個沒有單位的數字。你想要做this.height=75。這將改變元素本身的高度屬性。（我認爲你可以在沒有腳本的情況下完成這些工作，只使用CSS，你可以看到一個例子here和here）。

我不確定你的jQuery案例有什麼問題。確保ID具有相同的大寫字母 - 在您的示例中，您有一種不尋常的大寫形式。 ID在大多數瀏覽器中都區分大小寫。 $（「＃Bigger」）將匹配<img id="Bigger">而不是<img id="bigger">。你也不能有多個具有相同ID的元素 - 確保只有一個id="Bigger"。

來源

2014-11-24 17:19:08 nynexman4464

我redid你的代碼，它的一切工作。希望你只要看看我所做的就能學會。你的標籤需要放在你的標籤裏面。你的Src需要是src。保持代碼清潔。我知道我打字像狗屎，但我現在懶：D點擊鏈接到codepen

希望這會有所幫助。

$('img.image').mouseenter(function(){ 
    $(this).animate({height: '+=30'}); 
}); 

$('img.image').mouseleave(function(){ 
    $(this).animate({height: "-=30"}); 
});

http://codepen.io/anon/pen/VYLezx

來源

2014-11-24 17:20:03 Rafael

HTML OnMouseOver與列表圖像

回答

相關問題