Question

当悬停时，是否可以将main.jpg更改为特定的img，以便它就像...

onmousehover＃1 - ＆gt; changeto .. main1.jpg
onmousehover＃2 - ＆gt; changeto .. main2.jpg
onmousehover＃3 - ＆gt; changeto .. main3.jpg

这是......看起来像......

让我知道如何解决这个问题......谢谢！

Answer 1

添加主图像标记如下：

<img class="main-img" src="" />

添加以下三个链接：

<div class="hover-img-change">
    <a data-src='imagepath here'><img src="" /></a>
    <a data-src='imagepath here'><img src="" /></a>
    <a data-src='imagepath here'><img src="" /></a>
</div>

在上面的代码中，在data-src中添加背景图像路径。

添加脚本：

<script  type='text/javascript'>
$(document).ready(function(){
    $(".hover-img-change a").hover(function() {
          var backgroundImg = $(this).attr("data-src");
          $('.main-img').attr("src",backgroundImg);
    });
});
</script>

Answer 2

你需要提供像这样的标签类

then

这样我们就可以使用aditional样式标记访问它们，在此我们定义当您将这些元素悬停时会发生什么。

(1:(head [[1],[2]])):(tail [[1],[2]])
= (1:[1]):[[2]]
= [1,1]:[[2]]
= [[1,1],[2]]

修改

如果必须使用标签，则只能使用javascript执行此操作。我建议使用CSS背景。

Answer 3

试试这个

<body>
 <a href="#1" rel='img1.jpg' class="imgs">img1</a>
<a href="#1" rel='review_star.png' class="imgs">img2</a>
<a href="#1" rel='main1.jpg' class="imgs">img3</a>

<img src="" width="100px" height="100px" id="main_img"/>


<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$( "a.imgs" ).hover(

  function() {
  var img=$( this ).attr('rel');
  $('#main_img').attr('src','image/'+img);
 }
);

Answer 4

你真的不需要javascript来做那样的事情。您可以稍微更改您的HTML，然后使用CSS您可以更改图像。看看这里。

Demo

    <html>
  <head></head>
  <body>
    <div class="row">
      <div class="large-3 medium-3 small-12 columns">
        <div class="imageContainer">
          <span><a href="#"></span>
        </div>
      </div>
      <div class="large-3 medium-3 small-12 columns">
      <div class="imageContainer">
        <span><a href="#"></a></span>
        </div>
      </div>
      <div class="large-3 medium-3 small-12 columns">
      <div class="imageContainer">
        <span><a href="#"></a></span>
        </div>
      </div>
    </div>
  </body>
</html>

CSS

.row {
  max-width:75rem;
  width:100%;
  margin:0 auto;
}
.large-3 {
  width: 33%;
  float: left;
  padding:1px;
  position:relative;

}
span {
  height:300px;
  width:300px;
  display:block;
  position:relative;
  background:url(http://65.media.tumblr.com/91c29a3bb3002b5a6fd639982a3792a5/tumblr_inline_nlh60adG3w1svf3j7_500.jpg);
    background-repeat: no-repeat;
    background-position: center; 
  -webkit-transition: all 1s; /* Safari */
    transition: all 1s;
}
.imageContainer {
  height:300px;
  width:300px;
  overflow:hidden;
}
span:hover {
  background:url('http://my-smashing.smashingapps.netdna-cdn.com/wp-content/uploads/2009/12/Slow-Shutter-Photography/slowshutter_11.jpg');
  background-position: center; 
  -webkit-transition: all 1s; /* Safari */
    transition: all 1s;
}

你需要做的就是创建一个容器然后给这个容器oder跨越一个背景图像，并在用css悬停时可以改变图像。

更改鼠标悬停，制作main.jpg

4 个答案: