HTML，CSS 悬停在图像上

Posted 2023-03-05

【中文标题】HTML，CSS 悬停在图像上

【英文标题】：HTML, CSS hover on image

【发布时间】：2014-09-09 20:58:31

【问题描述】：

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

我有什么：

我想要什么：

部分代码：

            <div class="photo">
                <img src="http://placekitten.com/400/300" />
                <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/

【参考方案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;

【讨论】：

好的，但是如果我想在它旁边放另一张图片并用相同的鼠标悬停怎么办？ jsfiddle.net/eW7Lc我必须为每张图片创建自己的类吗？

是的，您必须单独定位每个位置。

【参考方案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>

【参考方案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。

【参考方案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" />
        <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" />
        <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 为图标放置虚拟图像。

干杯。