Question

我使用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>

Answer 1

我重写了你的代码。

我使用“General sibling combinator”。

http://www.w3.org/TR/selectors/#general-sibling-combinators

DEMO：http://jsfiddle.net/KgV33/1/

HTML：

<!DOCTYPE html>
<html>
<head>
<link type="text/css"; rel="stylesheet"; href="SLideshow.css"/>
<title>Untitled Document</title>
</head>
<body>
    <div class="SlideShow">
        <img src="http://dummyimage.com/420x232/ccc/fff&text=1" class="Thumbnail"/>
        <img src="http://dummyimage.com/420x232/ccc/000&text=2" class="Thumbnail"/>
        <div class="large">
            <img src="http://dummyimage.com/840x464/ccc/fff&text=1" class="LargeImage"/>
            <img src="http://dummyimage.com/840x464/ccc/000&text=2" class="LargeImage"/>
        </div>        
    </div>
</body>
</html>

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 > .Thumbnail ~ .large > .LargeImage{
    display:none;
}
/* default large img */
.SlideShow > .Thumbnail ~ .large > .LargeImage:nth-child(1){
    display:block;
}
/* hide all large img */
.SlideShow > .Thumbnail:hover ~ .large > .LargeImage{
    display:none;
}

.SlideShow > .Thumbnail:nth-child(2):hover ~ .large > .LargeImage:nth-child(2),
.SlideShow > .Thumbnail:nth-child(1):hover ~ .large > .LargeImage:nth-child(1){ display:block; }

如何在此幻灯片中设置默认图像？

1 个答案: