0

他の場所で見た例に従って、HTML と CSS のみを使用してスライド ショーを作成しました。ホバーセレクターで写真を切り替えます。別の写真にカーソルを合わせるまで、ホバーを永続的に保持するにはどうすればよいですか? ホバー セレクターがアクティブになるように既定の画像を設定するにはどうすればよいですか? 私のコードに完全に適応できないように見えるこの例のようなもの: http://www.cssplay.co.uk/menu/cssplay-hover-permanent-gallery-v2.html ?

これはコードです：

<!DOCTYPE html>
<html>
    <head>
      <link type="text/css"; rel="stylesheet"; href="SLideshow.css"/>
      <title>Untitled Document</title>
    </head>
<body>
<div class="SlideShow">
  <ul>
    <li>
      <img src="TheNorthFaceEcoGreen.jpg" class="Thumbnail">
      <div>
        <img src="TheNorthFaceEcoGreen.jpg" class="LargeImage">
      </div>
    </li>
    <li>
      <img src="PuenteAcelere.jpg" class="Thumbnail">
        <div>
          <img src="PuenteAcelere.jpg" class="LargeImage">
        </div>
    </li>
  </ul>
</div>
</body>
</html>

このスタイリングでは:

<style type="text/css">
.LargeImage{width:42em; height:23.2em;border-radius:15px;}
.Thumbnail{width:10em; height:6em;}
.SlideShow{width:42em;height:33.2em;overflow:hidden; border:solid black 2px;}
.SlideShow>ul{padding:0;margin:0;}
.SlideShow>ul>li{display:inline;margin:0em;padding:0em;font-size:1em;margin-    right:-0.2em;}
.SlideShow>ul>li>div{display:none;}
.SlideShow>ul>li:hover>div{display:block;float:left;}
</style>
4

1 に答える 1