Question

我想在仅使用HTML点击或悬停在小缩略图上时更改 .product-image div。在我使用JavaScript代码之前，我想跳过JavaScript方法，只留下纯HTML。

有没有办法只能用HTML做到这一点？

我只是想说图像的名称不一样，相反，图像名称将是一个变量，因此每次加载页面时，图像都会有其他名称。

这是我的代码：

ul,ol {list-style:none;}
.product-img-box {float:left;}
.product-img-box .product-image {width:300px; float: right;}
.product-img-box .more-views li img {width:90px; }

<div class="product-img-box">
<div class="more-views" style="float:left">
    <ul class="slides" id="slides">
        <li><a rel="#" href="#"><img src="http://i64.tinypic.com/24cuyhk.jpg" alt=""></a></li>
        <li><a rel="#" href="#"><img src="http://i64.tinypic.com/23mamww.jpg" alt=""></a></li>
        <li><a rel="#" href="#"><img src="http://i63.tinypic.com/1zwyaux.jpg" alt=""></a></li>
        <li><a rel="#" href="#"><img src="http://i63.tinypic.com/1zmk0ag.jpg" alt=""></a></li>
        <li><a rel="#" href="#"><img src="http://i64.tinypic.com/espx68.jpg" alt=""></a></li>
    </ul>
</div>
<p class="product-image" style="float:right">
    <a href="#"><img src="http://i64.tinypic.com/24cuyhk.jpg" alt="" id="mainImage"></a>
</p>
</div>

非常感谢

Answer 1

但是我不可能在那里使用href，所有href都是自动填充。

然后在这种情况下，您可以尝试使用 CSS：hover

我所做的是，当您将.grid1悬停时，它会查找~之前的.grid6}元素，然后它会查找#img1父（>）为.grid6的地方。

.grid1:hover ~ .grid6>#img1{
  display:block;
}

请参阅下面的示例代码。

＆＃13;

html,body{
  height:100%;
  width:100%;
  padding:0;
  margin:0;
}

.container{
  margin-left:5%;
  margin-top:5%;
  display:grid;
  grid-template-columns: 15% 1fr;
  grid-template-rows: repeat(5, 1fr);
  justify-items: center;
  align-items: center;
  height:80%;
  width:80%;
}

.container img{
  height:auto;
  width:100%;
}

.grid1, .grid2, .grid3, .grid4, .grid5{
  height:100%;
  width:100%;
}

.grid6{
  grid-row: 1 / 6;
  grid-column: 2 / 3;
}

.grid6 a{
  display:none
}


.grid1:hover ~ .grid6>#img1{
  display:block;
}

.grid2:hover ~ .grid6>#img2{
  display:block;
}

.grid3:hover ~ .grid6>#img3{
  display:block;
}

.grid4:hover ~ .grid6>#img4{
  display:block;
}

.grid5:hover ~ .grid6>#img5{
  display:block;
}

＆＃13;

<div class="container">
  <div class="grid1">
    <a rel="#" href="#img1">
      <img src="http://i64.tinypic.com/24cuyhk.jpg" alt="">
    </a>
  </div>
  <div class="grid2">
    <a rel="#" href="#img2">
      <img src="http://i64.tinypic.com/23mamww.jpg" alt="">
    </a>
  </div>
  <div class="grid3">
    <a rel="#" href="#img2">
      <img src="http://i63.tinypic.com/1zwyaux.jpg" alt="">
    </a>
  </div>
  <div class="grid4">
    <a rel="#" href="#img2">
      <img src="http://i63.tinypic.com/1zmk0ag.jpg" alt="">
    </a>
  </div>
  <div class="grid5">
    <a rel="#" href="#img2">
      <img src="http://i64.tinypic.com/espx68.jpg" alt="">
    </a>
  </div>
  <div class="grid6">
    <a href="#" id="img1">
      <img src="http://i64.tinypic.com/24cuyhk.jpg" alt="">
    </a>
    <a href="#" id="img2">
      <img src="http://i64.tinypic.com/23mamww.jpg" alt="">
    </a>
    <a href="#" id="img3">
      <img src="http://i63.tinypic.com/1zwyaux.jpg" alt="">
     </a>
    <a href="#" id="img4">
      <img src="http://i63.tinypic.com/1zmk0ag.jpg" alt="">
     </a>
    <a href="#" id="img5">
      <img src="http://i64.tinypic.com/espx68.jpg" alt="">
     </a>
  </div>
  </div>
</div>

＆＃13;

希望这有帮助。

在悬停时更改基本图像

1 个答案: