Question

我对这一切都很陌生，所以如果有人可以帮助我很感激 - 我有2个问题。

首先我尝试了：

<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？如果是这样我该如何解决这个问题？

由于

Answer 1

据我所知，您希望图像的高度为75像素，当它悬停在图像上时，您希望图像更改并且高度为90像素。你可以完成“成长”。只使用CSS使用悬停选择器。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

this.height始终是以像素为单位的高度。它是一个没有单位的数字。你想做this.height=75。这将改变元素本身的height属性。（我想你可以在没有脚本的情况下完成所有操作，只使用CSS，你可以看到一个例子here和here）。

我不确定你的jQuery案例有什么问题。确保ID具有相同的大小写 - 您的示例中有一种不寻常的大写形式。在大多数浏览器中，ID区分大小写。 $（＆＃34;＃Bigger＆＃34;）将与<img id="Bigger">匹配，但不会与<img id="bigger">匹配。您也不能拥有多个具有相同ID的元素 - 请确保只有一个id="Bigger"。

Answer 3

我重新编写代码，一切顺利。希望你只要看看我做了什么就可以学习。您的标签需要在li标签内。你的Src需要是src。保持代码清洁。我知道我打字就像狗屎，但我现在很懒：D点击指向编码的链接

希望这有帮助。

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

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

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

带有列表图像的HTML OnMouseOver

3 个答案: