Question

我需要在链接上悬停时更改div中的背景图像。当我点击链接时，我目前正在更改图像，但是我在悬停时需要它，所以当它点击的链接转到特定的网页时。

这就是我目前所拥有的

http://www.twist-dev.co.uk/hover/

任何想法或帮助都非常感激。

Answer 1

<强> JS

$(".list li a").hover( function() { // Changes the .image-holder's img src to the src defined in .list a's data attribute.
    var value=$(this).attr('data-src');
    $(".image-holder img").attr("src", value);
});

<强> CSS

.image-holder {
      float: left;
      margin-right: 100px;
      display: block;
      width: 350px;
      height: 500px;
      background-color: grey;
    }

.list {
  margin: 0;
  padding: 0;
  list-style: none;
  padding-top: 200px;  
}

a {
  color: red;
  margin-bottom: 20px;
  text-decoration: none;    
  display: inline-block;    
  text-transform: uppercase;
  font-family: Arial, sans-serif;
}

<强> HTML

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="image-holder">
      <img src="http://placehold.it/350x150">
    </div>
    <ul class="list">
      <li><a href="#" data-src="http://placehold.it/350x150">Link 1</a></li>
      <li><a href="#" data-src="http://placehold.it/350x250">Link 2</a></li>
      <li><a href="#" data-src="http://placehold.it/350x350">Link 3</a></li>
    </ul>

Answer 2

您可以使用mousenter和mouseleave个活动。

您的代码将是：

$(document).ready(function() {
    $("#cf7_controls > span").mouseenter(function() {
        $("#cf7 img").removeClass("opaque");

        var newImage = $(this).index();

        $("#cf7 img").eq(newImage).addClass("opaque");

        $("#cf7_controls span").removeClass("selected");
        $(this).addClass("selected");
    });
});

您可以在此处找到更多详细信息： https://api.jquery.com/mouseenter/

Answer 3

实现它的一种方法是将数据属性添加到菜单容器的子项

  <p id="cf7_controls">
  <span class="selected"></span>
  <span data-image="cylinder">CYLINDER HEAD &amp; BARRELS</span>
  <span data-image="crankcase">CRANKCASES</span>
  <span data-image="cooling">COOLING SYSTEM</span>
  <span data-image="intervals">ENGINE INTERNALS</span>
  </p>

然后在你的javascript文件中添加

$("#cf7_controls span").hover(function(){

//Find the image wich refers to the hovered link
var image = $(this).data("image");
$( "img[src^="+image+"]").css({ opacity: 1 });

}）

Answer 4

以下是必需的代码：

p#cf7_controls {
  text-align:center;
}
#cf7_controls span {
  padding-right:2em;
  cursor:pointer;
}
#cf7 {
  position:relative;
  height:519px;
  width:548px;
  margin:0 auto 10px;
}
#cf7 img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  opacity:0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}

#cf7 img.opaque {
  opacity:1;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=1);
}

    <body>
    
    <div id="cf7" class="shadow">
      <img class='opaque' src="https://www.twist-dev.co.uk/hover/base.png"/>
      <img src="https://www.twist-dev.co.uk/hover/https://www.twist-dev.co.uk/hover/cylinder.png" alt='1'/>
      <img src="https://www.twist-dev.co.uk/hover/crankcase.png" alt='2'/>
      <img src="https://www.twist-dev.co.uk/hover/cooling.png" alt='3'/>
      <img src="https://www.twist-dev.co.uk/hover/intervals.png" alt='4'/>
    </div>
    <p id="cf7_controls">
      <span class="selected"></span>
      <span>CYLINDER HEAD & BARRELS</span>
      <span>CRANKCASES</span>
      <span>COOLING SYSTEM</span>
      <span>ENGINE INTERNALS</span>
    </p>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    	$(document).ready(function() {
      $("#cf7_controls span").on('mouseover', function() {
        $("#cf7 img").removeClass("opaque");
    
        var newImage = $(this).index();
    
        $("#cf7 img").eq(newImage).addClass("opaque");
    
        $("#cf7_controls span").removeClass("selected");
        $(this).addClass("selected");
      });
    });
    </script>
    
    </body>

在悬停时更改背景图像

4 个答案: