Jquery 如何隐藏图像库以仅显示一张图片_Jquery_Html_Css

Jquery 如何隐藏图像库以仅显示一张图片

jquery html css

Jquery 如何隐藏图像库以仅显示一张图片,jquery,html,css,Jquery,Html,Css,嗨，我不知道怎么做，我有两个部分，第一部分我有一些图片，另一部分有一个列表。当我在列表上悬停时，我需要： “li:悬停”另一部分的图像将被隐藏以显示另一张图片。我的代码是：` <!doctype html> <html> <head> <meta charset="UTF-8"> <title>prueba</title> <script src="https://ajax.googleapis.com/ajax/l

嗨，我不知道怎么做，我有两个部分，第一部分我有一些图片，另一部分有一个列表。当我在列表上悬停时，我需要： “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>


普鲁巴
第1节名称{
浮动：对；
宽度：60%；
高度：400px；
}
li a:悬停>图像{
显示：首字母；
浮动：对；
宽度：50%；
保证金权利：2%；
}
.隐藏{
显示：无；
}
第二节画廊{
宽度：39%；
浮动：左；
身高：85%；
}
$（'.item'）。悬停（函数（）{
$（'.gallery>img'）.hide（）；
$（'.gallery>#'+$（this.attr（'data-img'））.show（）；
});
$（“.names”）.mouseout（函数（）{
$（'.gallery>img'）.show（）；
});

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

谢谢

我会使用一些jquery脚本来模拟这种效果，因为通过

CSS

无法访问名称部分之外的图像，同时使用

悬停

。下面是一个工作片段：

$（'.item'）。悬停（函数（）{
$（'.gallery>img'）.hide（）；
$（'.gallery>#'+$（this.attr（'data-img'））.show（）；
});
$（“.names”）.mouseout（函数（）{
$（'.gallery>img'）.show（）；
});
section.name{
浮动：对；
宽度：60%；
高度：400px；
}
li a:悬停>图像{
显示：首字母；
浮动：对；
宽度：50%；
保证金权利：2%；
}
.隐藏{
显示：无；
}
第二节画廊{
宽度：39%；
浮动：左；
身高：85%；
}
`




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

$（'.item'）。悬停（函数（）{
$（'.gallery>img'）.hide（）；
$（'.gallery>#'+$（this.attr（'data-img'））.show（）；
});
$（“.names”）.mouseout（函数（）{
$（'.gallery>img'）.show（）；
});
section.name{
浮动：对；
宽度：60%；
高度：400px；
}
li a:悬停>图像{
显示：首字母；
浮动：对；
宽度：50%；
保证金权利：2%；
}
.隐藏{
显示：无；
}
第二节画廊{
宽度：39%；
浮动：左；
身高：85%；
}
`




我将尝试您的代码，但不适用于我，我已经编写了问题的更改。我的答案中的代码片段是否重现了您试图实现的目标？我发布的代码使用的是jquery库，请确保导入时使用：
是的，它是相同的，只要复制和粘贴代码就可以了。您是否尝试添加我提供的jQuery链接？复制我发布的确切代码。javascript脚本和html部分看起来应该相同。你的答案仍然没有确切的代码我会尝试你的代码，但对我来说不起作用，我已经写下了问题上的更改我答案上的代码片段是否重现了你试图实现的目标？我发布的代码使用的是jquery库，请确保导入时使用：
是的，它是相同的，只要复制和粘贴代码就可以了。您是否尝试添加我提供的jQuery链接？复制我发布的确切代码。javascript脚本和html部分看起来应该相同。你的答案仍然没有确切的代码