HTML，CSS悬停在图像上

Question

我正在学习HTML和CSS，但遇到了一些问题。现在我正在制作一个网站，其中包含一些不同宽度的小图像。问题是当你将鼠标悬停在它们上面时，它们会显示可点击元素，并且我无法获得正确的位置。

现有代码： 期望效果： 相关代码：

            <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/

- user

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

- MannfromReno

---

好的，那个可以用，但是如果我想要在旁边放置另一张图片并且有相同的hover效果怎么办？ http://jsfiddle.net/eW7Lc/ 我需要为每个图像都创建一个带有hover的类吗？ - user

是的，您将需要逐个进行定位。 - MannfromReno

Answer 2

这个链接可以帮助你达到想要的目标。(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>

- charles

Answer 3

首先将父级div向左浮动，并将位置设置为相对定位。然后您将更好地控制任何子元素的定位。

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

在父级 div 内使用 padding、margin、bottom、left、right 和 top 可以实现所需的特定位置。这里我使用了 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。

- Aaron

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来放置图标的虚拟图像。

干杯。

- Mauno Vähä