Question

我正在为我的在线投资组合开发一个隐藏的拇指库。我为此构建的目标是尽可能使代码保持基本，以使其在所有浏览器中运行。

虽然我觉得这是一个纯粹的CSS-hidden-thumb画廊的绝佳解决方案，但我遇到了一个问题。上课与＃34; Divpop2＆＃34;是指定的悬停区域随后触发使用transform：translateY属性弹出的缩略图库。问题是拇指库然后由div（Divpop2＆＃34;）覆盖，它具有更高的z-index。 div的较高z-index（Divpop2）可以防止隐藏的拇指图库覆盖触发图库取消隐藏的div。

JSFiddle：http://jsfiddle.net/NickCParker/n5m549q9/

.Divcontainer{
width: 800px;
height: 500px;
border: 1px solid;
margin: 0px auto;
position: relative;
}

.Divpop0{
    width: 25px;
    height: 200px;
    border: 1px solid;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    top: 140px;
    opacity: 1;
    -webkit-transition: opacity 1s;
}

.Divpop1{
    width: 25px;
    height: 200px;
    border: 1px solid;
    float: right;
    margin: 0;
    padding: 0;
    position: relative;
    top: 140px;
    opacity: 1;
    -webkit-transition: opacity 1s;
}
.Divpop1:hover{opacity: 1;}

.Divpop2{
    opacity: 1;
    z-index: 9998;
    width: 750px;
    height: 100px;
    margin: 0px auto;
    border: 1px solid;
    position: relative;
    top: 398px;
}
.Divpop3{opacity: 1;
    position: relative;
    top: 399px;
    border: solid 1px;
    width: 798px;
    height: 100px;
    background-color: blue;
    -webkit-transition-duration:.5s;
        }

.Divpop2:hover ~ .Divpop3{
    opacity:1;
    -webkit-transform:translateY(-103px);
} 


.thumbed{overflow: hidden; white-space:nowrap; margin:0 45px}
.thumbed ul{float: left; transform:translateX(0)}
ul li {display: inline-block; padding-top: 6px;}
li a:hover, a:focus{opacity:1;}
li a{opacity:0.85;}
li a:focus{opacity:1;}
ul li img {width: 135px; }

这是一个来回的问题，所以我很好奇是否有简单的方法可以不使用任何其他语言。任何见解都表示赞赏。

Answer 1

你可以把Divpop3放在Divpop2里面，这样悬停就会继续工作，你可以点击Divpop3中的项目。

http://jsfiddle.net/n5m549q9/2/

<div class="Divpop2">
    <div class="Divpop3">
    <ul class="thumbed">    
    <li><a href="1"><img  src="https://farm4.staticflickr.com/3696/9612259782_df05b8e2e3_b.jpg"/></a></li>
    <li><a href="2"><img  src="https://farm6.staticflickr.com/5456/9248836609_215deafe34_b.jpg"/></a></li>
    <li><a href="3"><img  src="https://farm4.staticflickr.com/3696/9612259782_df05b8e2e3_b.jpg"/></a></li>
    <li><a href="4"><img  src="https://farm6.staticflickr.com/5456/9248836609_215deafe34_b.jpg"/></a></li>
    <li><a href="5"><img  src="https://farm4.staticflickr.com/3696/9612259782_df05b8e2e3_b.jpg"/></a></li>
    </ul>
    </div>
</div>

使div在div下可点击

1 个答案: