Question

我想在您将鼠标悬停在第一个列表项上时更改图像，但此代码无效...................

<div class="first_add">
    <img id="main_image" src="images/11.png"  width="500px" height="300px"/>
    <ul class="first_add_options_list">
        <li class="first_add_options_list_1">
            <a id="hello" class="first_add_options_list" href="#">Discount 10%</a>
        </li>
        <li class="first_add_options_list_2">    
            <a class="first_add_options_list" href="#">Discount 20%</a>
        </li>
        <li class="first_add_options_list_3">
            <a class="first_add_options_list" href="#">Discount 40%</a>
        </li>
        <li class="first_add_options_list_4">
            <a class="first_add_options_list" href="#">Discount 50%</a>
        </li>    
    </ul>

    <script>
        $(document).ready(function() {
            $("#hello").mouseover(function() {
                /* Act on the event */
                $("#main_image").attr('src', 'images/12.png');
            });
        });
    </script>
</div>

Answer 1

通过查看您的代码，您是初学者。请检查此步骤。

首先，您没有 #hello 和 .first_add_options_list_1 ，最后只检查您是否有 jquery cdn 或下载的文件是正确的道路..因为这是初学者的错误之一

您可以将其添加到代码

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js">  </script>

Answer 2

当你将 hello 元素（你的文档上没有）存在时，会触发此事件，你需要更正id（main_image可能吗？）

$(document).ready(function() {
    $("#main_image").mouseover(function() {
        /* Act on the event */
        $("#main_image").attr('src', 'images/12.png');
    });
});

Answer 3

如果我理解正确，而不是

 $("#hello").mouseover(function() {

您应该使用

 $(".first_add_options_list_1").mouseover(function() {

希望它有用

Answer 4

#符号不能位于id属性中。

正确的HTML是

<a id="hello" class="first_add_options_list" href="#">Discount 10%</a>

不

<a id="#hello" class="first_add_options_list" href="#">Discount 10%</a>

如果您在离开鼠标时需要返回11.png，则需要hover。

<img id="main_image" src="http://placehold.it/500x300"  width="500" height="300"/>
<ul class="first_add_options_list">
    <li class="first_add_options_list_1">
        <a id="hello" class="first_add_options_list" href="#">Discount 10%</a>
    </li>
    <li class="first_add_options_list_2">    
        <a class="first_add_options_list" href="#">Discount 20%</a>
    </li>
    <li class="first_add_options_list_3">
        <a class="first_add_options_list" href="#">Discount 40%</a>
    </li>
   <li class="first_add_options_list_4">
        <a class="first_add_options_list" href="#">Discount 50%</a>
    </li>    
</ul>

$(document).ready(function() {
    $("#hello").hover(function() {
        $("#main_image").attr('src', 'http://placehold.it/499x299');
    }, function() {
        $("#main_image").attr('src', 'http://placehold.it/500x300');
    });
});

查看工作小提琴：http://jsfiddle.net/4aykkwcy/

如何通过单击jquery中的按钮来更改图像

4 个答案: