Question

目前我正在使用下面的代码来更改图像，但我需要做的是在我悬停在图像的标题链接的同时更改图像

onmouseover="this.src='Images/img.png'" onmouseout="this.src='Images/img2.png'"

例如当有人将鼠标悬停在标题链接上时，例如'鸡肉菜单'下面的图片将从img.png更改为img2.png，其中img.png是首页，img2.png是我的菜单列表可以找到的地方

Answer 1

如果您只想使用CSS，可以使用adjacent sibling combinator（+）。

将您的HTML视为 -

<div id="headingtext">HEADING</div>
<div id="imgDiv"></div>

CSS可以是 -

#headingtext:hover + #imgDiv {
    background-image: url("https://images.blogthings.com/thesingleflowertest/flower-3.png");
    background-repeat:no-repeat;
    height:500px;
}

#imgDiv {
    background-image: url("https://images.blogthings.com/thesingleflowertest/flower-5.png");
    background-repeat:no-repeat;
    height:500px;
}

小提琴演示： http://jsfiddle.net/3z8CN/

Answer 2

您可以这样做：

<a href="#">Link</a>
<img src="http://www.blogwmp.com/wp-content/uploads/2009/08/google-logo-100x100.png" alt="">

<script>
    $('a').hover(function(){
        $('img').attr("src", "http://www.betaarchive.com/forum/download/file.php?avatar=16617_1318156786.png");             
    }, function(){
        $('img').attr("src", "http://www.blogwmp.com/wp-content/uploads/2009/08/google-logo-100x100.png");             
    });
</script>

Here's the Fiddle

因此，使用.hover()更改图片的属性src，然后将其替换为其他图片。 .hover()有参数onMouseOver和onMouseOut，因此当鼠标离开链接时，我们会放回初始图像。

Answer 3

检查小提琴......

fiddle

你需要添加jquery

- HTML -

<ul>
    <li>
        <span class='my_span'>this is image</span>
        <img src="http://dummyimage.com/100x100/000000/fff"/>
    </li>
    <li>
        <span class='my_span'>this is image</span>
        <img src="http://dummyimage.com/100x100/000000/fff"/>
    </li>
</ul>

- jquery -

$('span.my_span').hover(
    function(){
        $(this).next('img').attr("src","http://dummyimage.com/100x100/888888/000");
    },
    function(){
        $(this).next('img').attr("src", "http://dummyimage.com/100x100/000000/fff");             
    }
);

悬停文本菜单时更改IMG src

3 个答案: