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

1

我重写你的代码。

我使用“通用兄弟组合器”。

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

演示：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; }
于 2013-01-30T07:22:33.370 回答