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与列表图像

回答

相关问题