如何将鼠标悬停在段落上时更改图像的 src

How to change an image's src when hovering on a paragraph?

本文关键字：图像 src 段落 鼠标 悬停      更新时间：2023-09-26

我想在使用jQuery将鼠标悬停在<p>上时更改图像的src，例如 http://mdpoison.com/主页中的新闻部分。（尝试将鼠标悬停在"你知道吗？

我在这个页面代码中看到 html 是这样的：

<p data-val="/media/SOP/mdpoisoncom/homepage/didyouknow/CarbonMonoxideDidYouKnow.jpg" class="">
  Families can help prevent poison-related injuries this winter by following the MPC’s <a href="http://mdpoison.com/media/SOP/mdpoisoncom/education/pdf/WinterPoisonSafety_2014.pdf">winter poison safety tips</a>.
</p>

当您将鼠标悬停在它上面时，它会添加一个名为 dky-active .我不知道如何添加这个类并使用jQuery切换新src。

我看到这样的代码：

$('ul.small img').hover(function ()
{
  $('.inner img').attr('src' ,$(this).attr('src'));
});

但这在我的情况下没有用，因为我想切换图像。

你可以使用 css ~ 选择器。

通过使用这个，它避免使用javascript，而是将其全部推送到css选择器上：

.wrapper {
  height: 500px;
  width: 500px;
  background: red;
}
.myImg {
  height: 300px;
  width: 300px;
  background: url(http://placekitten.com/g/200/300); /*original placeholder*/
}
.wrapper .ptag1:hover ~.myImg {
  background: url(http://placekitten.com/g/300/200); /*first paragraph hovered*/
}
.wrapper .ptag2:hover ~.myImg {
  background: url(http://placekitten.com/g/300/300); /*second paragraph hovered*/
}
<div class="wrapper">
  <p class="ptag1">I'm a paragraph. Hover Me!!</p>
  <p class="ptag2">I'm a paragraph. Hover Me too!!</p>
  <div class="myImg"></div>
</div>

你可以

这样做：

.HTML

<div class="content">
    <p data-img="http://www.wired.com/wp-content/uploads/images_blogs/rawfile/2013/11/offset_WaterHouseMarineImages_62652-2-660x440.jpg">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p data-img="http://imageswiki.com/wp-content/uploads/2014/11/images-Photoshop-Image-of-the-horse-053857-.jpg">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur</p>
</div>
<div class="picture">
    <img src="" id="picture" width="200" height="200" />
</div>

简讯

$('p').mouseover(function () {
   $('#picture').attr('src', $(this).data('img'));
});

小提琴示例

$('p').on('mouseover',function(){
  
  $('img').attr('src',"http://lorempixel.com/200/200/sports/2");
  
  });
$('p').on('mouseout',function(){
  
  $('img').attr('src',"http://lorempixel.com/200/200/sports/1");
  
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Hover me to change the image</p>
<img src="http://lorempixel.com/200/200/sports/1" width="200" height="200">

相关文章：