Question

我花了很多时间尝试在图片上显示previous，next和zoom按钮（在mouseover上）。这是结果：

CSS

.imgcon {
  position:relative;
}

.imnav {
  opacity:0.6;
  display:none;
  position:absolute;
  left:0;
  width:100%;
  height:100%;
}

.imgcon:hover .imnav {
  display:inline-block;
}

.prim {
  float:left;
  height:100%;
  width:33%;
  background:url(/pr.gif)left center no-repeat;
}

.zmim {
  float:left;
  height:100%;
  width:34%;
  background:url(/zm.gif)center center no-repeat;
}

.neim {
  float:left;
  height:100%;
  width:33%;
  background:url(/ne.gif)right center no-repeat;
}

HTML

<div class="container">
    <div class="imgcon">
        <a href="/maximize"><img src="/image.jpg" width="660" /></a>

        <div class="imnav">
            <a href="/previous">
                <div class="prim"></div>
            </a>
            <a href="/full-size">
                <div class="zmim"></div>
            </a>
            <a href="/next">
                <div class="neim"></div>
            </a>
        </div>
    </div>
</div>

它适用于除Chrome之外的所有浏览器，因此我无法使用它。任何想法如何解决它？

第二个问题：我不想在mouseover上显示所有3个图标。我想根据鼠标的位置逐个显示它们。如果鼠标滚过.prim，我想显示.prim;如果鼠标滚过.zmim，我想显示.zmim，如果鼠标滚过.neim，我想显示.neim。

Answer 1

对我而言，隐形控件似乎不太直观......但是

JSFiddle Demo

HTML / *注意添加＆＃39;控制＆＃39; class * /

<div class="container">
    <div class="imgcon">
        <a href="/maximize">
            <img src="http://upload.wikimedia.org/wikipedia/commons/5/58/Sunset_2007-1.jpg" width="660" />
        </a>

        <div class="imnav">
            <a href="/previous">
                <div class="prim control"></div>
            </a>

            <a href="full-size">
                <div class="zmim control"></div>
            </a>

            <a href="/next">
                <div class="neim control"></div>
            </a>

        </div>
    </div>
</div>

<强> CSS

.imgcon{
    position:relative;
    width:660px;
    margin:0 auto;
}

.imnav {
    color: #ffffff;
    margin:o auto;
    opacity:0.6;
    display:none;
    position:absolute;
    top:0;
    left:0px;
    width:100%;
    height:100%;
}

.imgcon:hover .imnav{display:inline-block;}

.control {
    float:left;
    height:100%;
    width:33%;
    opacity:0;    
}

.control:hover {
    opacity:0.6;
}

.prim{
    background:url('http://i59.tinypic.com/294s94i.gif')left center no-repeat;
}
.zmim{
    width:34%;
    background:url('http://i57.tinypic.com/dgp4xy.gif')center center no-repeat;
}
.neim{
    background:url('http://i62.tinypic.com/2cqfqxf.gif')right center no-repeat;
}

Answer 2

要立即显示aal图标，请在css中添加以下代码：的 Demo

.imgcon:hover .imnav {display:block} .imnav {top:5%;}

如何展示＆＃34; next＆＃34;，＆＃34; previous＆＃34;图像上的按钮（鼠标悬停）？

2 个答案: