Question

嗨我不知道怎么做，我有两个部分，第一部分我有一些图像，另一部分有一个列表。当我在列表上悬停时我需要这样做： “li：悬停”另一部分的图像被隐藏以显示另一张图片。我的代码是：`

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>prueba</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jque‌ry.min.js"></script>
<style>section.names {
  float: right;
  width: 60%;
  height: 400px;
}

li a:hover>img {
  display: initial;
  float: right;
  width: 50%;
  margin-right: 2%;
}

.hide {
  display: none;
}

section.gallery {
  width: 39%;
  float: left;
  height: 85%;
}</style>
</head>

<body>
<script>$('.item').hover( function() {
  $('.gallery > img').hide();
  $('.gallery > #' + $(this).attr('data-img')).show();
});

$( ".names" ).mouseout(function() {
   $('.gallery > img').show();
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <section class="gallery">
    <img id="img1" src="lizard.jpg" alt="Smiley face 01" height="100%" width="100%">
    <img id="img2" src="lizard.jpg" alt="Smiley face 02" height="100" width="200">
    <img id="img3" src="lizard.jpg" alt="Smiley face 03" height="45px" width="150px">
  </section>

  <section class="names">
    <ol>
      <li class="item" data-img="img1"><a href="project.html">Esplai,silkscreen and editorial production</a></li>
      <li class="item" data-img="img2"><a href="project.html">Esplai,silkscreen and editorial production</a></li>
      <li class="item" data-img="img3"><a href="project.html">Esplai,silkscreen and editorial production</a></li>
    </ol>

  </section>
</div>
</body>
</html>

实际上图像显示在右侧，但我需要在左侧显示，另一个隐藏。感谢

Answer 1

我会使用一些jquery脚本来模拟这种效果，因为通过CSS它无法访问名称部分之外的图像并同时使用hover。这是一个工作片段：

$('.item').hover( function() {
  $('.gallery > img').hide();
  $('.gallery > #' + $(this).attr('data-img')).show();
});

$( ".names" ).mouseout(function() {
   $('.gallery > img').show();
});

section.names {
  float: right;
  width: 60%;
  height: 400px;
}

li a:hover>img {
  display: initial;
  float: right;
  width: 50%;
  margin-right: 2%;
}

.hide {
  display: none;
}

section.gallery {
  width: 39%;
  float: left;
  height: 85%;
}

`

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <section class="gallery">
    <img id="img1" src="lizard.jpg" alt="Smiley face 01" height="100%" width="100%">
    <img id="img2" src="lizard.jpg" alt="Smiley face 02" height="100" width="200">
    <img id="img3" src="lizard.jpg" alt="Smiley face 03" height="45px" width="150px">
  </section>

  <section class="names">
    <ol>
      <li class="item" data-img="img1"><a href="project.html">Esplai,silkscreen and editorial production</a></li>
      <li class="item" data-img="img2"><a href="project.html">Esplai,silkscreen and editorial production</a></li>
      <li class="item" data-img="img3"><a href="project.html">Esplai,silkscreen and editorial production</a></li>
    </ol>

  </section>
</div>

为此，首先为每个元素列表和class="item"等自定义html5属性提供data-img="img01"。然后，将个人ID添加到左侧部分的每个图像。请注意，图像ID和属性必须相同才能使其正常工作。

每次用户将鼠标悬停在列表元素上时，都会触发脚本函数。当用户离开列表时，左图像将再次显示。

<强> *修改以下是如何导入jQuery库的屏幕截图：

如何隐藏图片库只显示一张图片

1 个答案: