在mouseover时更改,使main.jpg

27 浏览
0 Comments

在mouseover时更改,使main.jpg

当悬停时,是否有可能使main.jpg更改为特定的图像,使其变成像这样...

  • 当鼠标悬停在#1上时,将其更改为main1.jpg
  • 当鼠标悬停在#2上时,将其更改为main2.jpg
  • 当鼠标悬停在#3上时,将其更改为main3.jpg

这是...它的样子...


输入图像描述


请告诉我应该如何解决这个问题...谢谢!

0
0 Comments

问题原因:在给a标签绑定hover事件时,使用了错误的选择器,导致无法正确获取rel属性的值。

解决方法:将选择器"a.imgs"改为".imgs",以正确选中所有class为"imgs"的元素。代码如下:


  img1
  img2
  img3
  
  
  

以上代码将在鼠标悬停在".imgs"元素上时,获取对应元素的rel属性值,并将其拼接到"image/"路径下,然后将结果赋值给id为"main_img"的img元素的src属性,从而实现了鼠标悬停时更换主图片的效果。

0
0 Comments

在这段内容中,问题是如何在鼠标悬停时更改main.jpg图片,原因是没有为a标签添加类。解决方法是给a标签添加类,并使用附加的样式标签来定义鼠标悬停时元素的行为。如果必须使用a标签,则只能通过JavaScript来实现。推荐使用CSS背景来解决这个问题。

以下是整理后的文章:

你需要给a标签添加类,如下所示:


这样我们就可以通过附加的样式标签来访问它们,并定义鼠标悬停时元素的行为。


编辑:

如果必须使用a标签,则只能通过JavaScript来实现。我建议使用CSS背景来解决这个问题。

0
0 Comments

问题的出现原因是:在上述代码中,当鼠标悬停在链接上时,主图片(main.jpg)没有发生改变。

解决方法是:

1. 在代码中添加一个主图片标签,如下所示:


2. 在代码中添加三个链接,如下所示:

3. 在代码中添加以下脚本:


通过以上步骤,当鼠标悬停在链接上时,主图片的src属性会根据链接上的data-src属性的值改变,从而实现了"change on mouseover, make the main.jpg"的效果。

0