css - 如何在图像上显示 "next"、 "previous"按钮(鼠标悬停时)？

Question

我花了很多时间试图在图像上显示previous、next 和zoom 按钮(在mouseover 上) ).这是结果:

http://jsfiddle.net/9TGvq/

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，我想显示 。内姆。

Answer 1

不可见的控件对我来说似乎不太直观......但是

JSFiddle Demo

HTML/* 注意添加了 'control' 类 */

<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;
}