HTML，CSS 悬停在图像上

Question

我正在学习html和css，但我遇到了一些麻烦。 现在，我正在制作一个包含不同 w 大小的小图像的网站。 关键是，当您将鼠标悬停在它们上时，它们会显示可点击的元素，而我无法在它们上找到正确的位置。

我有什么：

我想要什么：

部分代码：

            <div class="photo">
                <img src="http://placekitten.com/400/300" alt="image"/>
                <div class="zoom">
                </div>
                <div class="all">
                </div>
                <div class="link">
                </div>
                <div class="info">
                </div>
                <div class="like">
                </div>
            </div>

CSS：

.photo img {
    float:left;
    width:auto;
    height:auto;
}

.photo:hover {
    display: block;
    opacity:0.6;
}
.photo:hover .zoom {
    position: absolute;
    background-image:url(http://www.kolazhgostar.com/images/small-img05.png);
    background-repeat:no-repeat;
    width:46px;
    height:50px;
    background-position:center;

http://jsfiddle.net/zzu87/

Answer 1

如果使用position: absolute，则需要为每张图片添加一些定位。试试这样的：

.photo:hover .zoom {
  position: absolute;
  top: 50%;
  left: 200px;
  background-image: url(http://www.kolazhgostar.com/images/small-img05.png);
  background-repeat: no-repeat;
  width: 46px;
  height: 50px;
  background-position: center;
}

Answer 2

This should get you where you want to go. (JS fiddle)

css

.photo {
    display:block;
    position:absolute;
    background-image: url('//placekitten.com/400/300');
    background-repeat: no-repeat;
    width:400px;
    height:300px;
}

.photo>.container {
    display:none;
}
.photo>.container>div {
    display:inline;
}

.photo:hover>.container {
    display:block;
    margin-left: 85px;
    margin-top: 200px;
}

html

<div class="photo">
    <div class="container">
        <div class="zoom">
            <img src="//www.kolazhgostar.com/images/small-img05.png"/>
        </div>
        <div class="all">
            <img src="//www.kolazhgostar.com/images/small-img05.png"/>
        </div>
        <div class="link">
            <img src="//www.kolazhgostar.com/images/small-img05.png"/>
        </div>
        <div class="info">
                        <img src="//www.kolazhgostar.com/images/small-img05.png"/>
        </div>
        <div class="like">
            <img src="//www.kolazhgostar.com/images/small-img05.png"/>
        </div>
    </div>
</div>

Answer 3

首先将父 div 向左浮动并将位置设置为相对。这样您就可以更好地控制任何子元素的定位。

.photo {
   float:left;
   position:relative;
}

之后，padding、margin、bottom、left、right 和 top 可用于实现父 div 内所需的特定位置。这里我使用了left和top...

.photo:hover .zoom {
   position: absolute;
   background-image:url(http://www.kolazhgostar.com/images/small-img05.png);
   background-repeat:no-repeat;
   width:46px;
   height:50px;
   background-position:center;

   left:50%;
   top:50%;
}

这里是FIDDLE。

Answer 4

有趣的问题。我通过为照片及其内容制作更多 div 容器解决了这个问题。此外，我假设您的照片图像是 400x300。随意修改代码！ :)

我认为我的解决方案的有趣之处在于我只使用了position: relative;，它会提升图像上方的悬停菜单，因此它可以很好地协同工作：

.photo-menu {
    position: relative;
    left: 0px;
    top: -300px;
}

因此，大部分水平位置是使用margin: 0 auto; 完成的，而不是使用绝对或相对位置进行过多播放。一般来说，这些都是可以避免的。视情况而定。

还可以从以下位置查看结果：js fiddle example 或从 this jsfiddle example（如果稍后删除猫图像）。

下面还链接相关代码：

HTML：

<div class="photo-container">

    <div class="photo">
        <img src="http://placekitten.com/400/300" alt="image"/>
        <div class="photo-menu">
              <div class="upper-menu"></div>
              <div class="lower-menu">
                   <div class="all"></div>
                   <div class="link"></div>
                   <div class="info"></div>
                   <div class="like"></div>
              </div>
        </div>
    </div>

    <div class="photo">
        <img src="http://placekitten.com/400/300" alt="image"/>
        <div class="photo-menu">
              <div class="upper-menu"></div>
              <div class="lower-menu">
                   <div class="all"></div>
                   <div class="link"></div>
                   <div class="info"></div>
                   <div class="like"></div>
              </div>
        </div>
    </div>

</div>

CSS：

body {
    margin: 0px;
    padding: 0px;
}

.photo-container {
    width: 800px;
}

.photo {
    float: left;
    width: 400px;
}

.photo, .photo-menu {
    width: 400px;
    height: 300px;
}

.photo:hover {
    display: block;
    opacity: 0.6;
}

.photo-menu {
    position: relative;
    left: 0px;
    top: -300px;
}

.photo .photo-menu {
    display: none;
}

.photo:hover .photo-menu {
    display: block;
}

.photo-menu .upper-menu {   
    background-image: url("http://www.kolazhgostar.com/images/small-img05.png");
    background-repeat: no-repeat;
    background-position: center;
    width: inherit;
    height: 200px;
    margin: 0 auto;
}

.photo-menu .lower-menu {   
    width: 280px;
    margin: 0 auto;
    height: 100px;
}

.photo-menu .lower-menu div {
    min-width: 40px;
    width: 24.9999%;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center;
    float: left;
}

.photo-menu .lower-menu .all {  
    background-image: url("http://placehold.it/40/ff0000");
}

.photo-menu .lower-menu .link { 
    background-image: url("http://placehold.it/40/00ff00");
}

.photo-menu .lower-menu .info { 
    background-image: url("http://placehold.it/40/0000ff");
}

.photo-menu .lower-menu .like { 
    background-image: url("http://placehold.it/40/c0ff33");
}

注意：我使用 placehold.it 为图标放置虚拟图像。

干杯。