文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >在图像悬停时显示文本

问在图像悬停时显示文本
EN

Stack Overflow用户
提问于 2016-08-17 00:18:08
回答 2查看 80关注 0票数 0

我正在尝试在悬停时向图像添加文本。也许我需要再看一眼我做错了什么？

​

代码语言：javascript
复制
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  margin: 0 auto;
  max-width: 947px;
}
[class*=bit-] {
  float: left;
  padding: .3em;
  position: relative;
}
button {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  color: #fff;
  border:none;
  display: none;
  cursor: pointer;
  background-color: black;
  height: 30px;
  width: 30%;
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

.static {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  color: #fff;
  border:none;
  display: block;
  cursor: pointer;
  background-color: black;
  height: 30px;
  width: 30%;
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}
}
 
 p.important {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size:12px;
  color:#fff;
  display: none;
  width: 50%;
  left: 50%;
  top: 80%;
  position: absolute;
  transform: translate(-50%, -50%);
  text-align:center;
 }
	

.imgHover {
	max-width: 100%;
    max-height: 100%;
    transition: .2s all;
}
.imgHover img:hover {
	-webkit-filter: brightness(50%);
}
.imgHover:hover button {
  display: initial;
}

.imgHover:hover .important {
	display: initial;
}
/* Grids */

.box {
  background: #00aabe;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  padding: 20px 0;
}
.box-2 {
  background: #00aabe;
}
.bit-1 {
  width: 100%;
}
.bit-2 {
  width: 50%;
}
.bit-3 {
  width: 33.33333%;
}
.bit-4 {
  width: 25%;
}
.bit-5 {
  width: 20%;
}
.bit-6 {
  width: 16.66667%;
}
.bit-7 {
  width: 14.28571%;
}
.bit-8 {
  width: 12.5%;
}
.bit-9 {
  width: 11.11111%;
}
.bit-10 {
  width: 10%;
}
.bit-11 {
  width: 9.09091%;
}
.bit-12 {
  width: 8.33333%;
}
.bit-25 {
  width: 25%;
}
.bit-40 {
  width: 40%;
}
.bit-60 {
  width: 60%;
}
.bit-75 {
  width: 75%;
}
.bit-35 {
  width: 35%;
}
.bit-65 {
  width: 65%;
}
/* Responsive Goodness */

/* Defaults above are set Desktop resolution or higher */

/* Laptop */

@media (min-width: 50em) and (max-width: 68.75em) {
  .bit-7,
  .bit-35,
  .bit-65 {
    width: 100%;
  }
  .bit-10,
  .bit-12,
  .bit-4,
  .bit-8 {
    width: 50%;
  }
}
/* Tablet */

@media (min-width: 30em) and (max-width: 50em) {
  .bit-10,
  .bit-12,
  .bit-4,
  .bit-6,
  .bit-8 {
    width: 50%;
  }
  .bit-1,
  .bit-11,
  .bit-3,
  .bit-5,
  .bit-7,
  .bit-9 {
    width: 100%;
  }
}
/* Mobile */

@media (max-width: 30em) {
  .bit-1,
  .bit-10,
  .bit-11,
  .bit-12,
  .bit-2,
  .bit-3,
  .bit-4,
  .bit-5,
  .bit-6,
  .bit-7,
  .bit-8,
  .bit-9 {
    width: 100%;
  }
}
代码语言：javascript
复制
<div class="container">
    <!-- Hero Image -->
    <div class="bit-1">
    <div class="box">hero</div>
    </div>
    <!-- Mini CSS Slider -->
    <div class="bit-1">
    <div class="box">mini slider</div>
    </div>
    <!-- Story1 with Rollover Hover -->
    <div class="bit-2">
    <div class="imgHover"><img src="http://i.imgur.com/IbeKjJZ.jpg" width="100%">
    <p class="important">Hey there.</p>
    <button>Shop Now</button>
    </div>
    </div>
    <!-- Story2 with Rollover Hover -->
    <div class="bit-2">
    <div class="imgHover"><img src="http://i.imgur.com/0hFyr98.jpg" width="100%"><button>Shop Now</button></div>
    </div>
    <!-- Story3 with Rollover Hover -->
    <div class="bit-2">
    <img src="http://i.imgur.com/0hFyr98.jpg" width="100%"><button class="static">Shop Now</button>
    </div>
    <!-- Story4 with Rollover Hover -->
    <div class="bit-2">
    <img src="http://i.imgur.com/IbeKjJZ.jpg" width="100%"><button class="static">Shop Now</button>
    </div>
    <!-- Skinny Banner -->
    <div class="bit-1">
    <div class="box">small banner</div>
    </div>
    <!-- Rewards -->
    <div class="bit-2">
    <div class="box">rewards</div>
    </div>
    <!-- Store Locator -->
    <div class="bit-2">
    <div class="box">store locator</div>
    </div>
    
    </div>

​

这是我最初的屏幕截图，它在相同的代码下工作得很好。也许我漏掉了什么？任何建议都将不胜感激。

​

​

html
css
image
hover
responsive
EN

回答 2

Stack Overflow用户

发布于 2016-08-17 00:31:23

你有一个CSS语法问题，创建了一个错误链。仔细检查第44/45行，您已经写了以下内容：

字体{

- .static：‘打开无衬线’，无衬线；字体-权重: 400；颜色：#fff；边框:无；显示:块；光标:指针；背景颜色:黑色；高度: 30px；宽度: 30%；左侧: 50%；顶部: 50%；位置:绝对；变换:平移(-50%，-50%)；}}

只需删除多余的}即可解决此问题。

工作示例：

​

代码语言：javascript
复制
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  margin: 0 auto;
  max-width: 947px;
}
[class*=bit-] {
  float: left;
  padding: .3em;
  position: relative;
}
button {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  color: #fff;
  border: none;
  display: none;
  cursor: pointer;
  background-color: black;
  height: 30px;
  width: 30%;
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}
.static {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  color: #fff;
  border: none;
  display: block;
  cursor: pointer;
  background-color: black;
  height: 30px;
  width: 30%;
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}
p.important {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 12px;
  color: #fff;
  display: none;
  width: 50%;
  left: 50%;
  top: 80%;
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: center;
}
.imgHover {
  max-width: 100%;
  max-height: 100%;
  transition: .2s all;
}
.imgHover img:hover {
  -webkit-filter: brightness(50%);
}
.imgHover:hover button {
  display: initial;
}
.imgHover:hover .important {
  display: initial;
}
/* Grids */

.box {
  background: #00aabe;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  padding: 20px 0;
}
.box-2 {
  background: #00aabe;
}
.bit-1 {
  width: 100%;
}
.bit-2 {
  width: 50%;
}
.bit-3 {
  width: 33.33333%;
}
.bit-4 {
  width: 25%;
}
.bit-5 {
  width: 20%;
}
.bit-6 {
  width: 16.66667%;
}
.bit-7 {
  width: 14.28571%;
}
.bit-8 {
  width: 12.5%;
}
.bit-9 {
  width: 11.11111%;
}
.bit-10 {
  width: 10%;
}
.bit-11 {
  width: 9.09091%;
}
.bit-12 {
  width: 8.33333%;
}
.bit-25 {
  width: 25%;
}
.bit-40 {
  width: 40%;
}
.bit-60 {
  width: 60%;
}
.bit-75 {
  width: 75%;
}
.bit-35 {
  width: 35%;
}
.bit-65 {
  width: 65%;
}
/* Responsive Goodness */

/* Defaults above are set Desktop resolution or higher */

/* Laptop */

@media (min-width: 50em) and (max-width: 68.75em) {
  .bit-7,
  .bit-35,
  .bit-65 {
    width: 100%;
  }
  .bit-10,
  .bit-12,
  .bit-4,
  .bit-8 {
    width: 50%;
  }
}
/* Tablet */

@media (min-width: 30em) and (max-width: 50em) {
  .bit-10,
  .bit-12,
  .bit-4,
  .bit-6,
  .bit-8 {
    width: 50%;
  }
  .bit-1,
  .bit-11,
  .bit-3,
  .bit-5,
  .bit-7,
  .bit-9 {
    width: 100%;
  }
}
/* Mobile */

@media (max-width: 30em) {
  .bit-1,
  .bit-10,
  .bit-11,
  .bit-12,
  .bit-2,
  .bit-3,
  .bit-4,
  .bit-5,
  .bit-6,
  .bit-7,
  .bit-8,
  .bit-9 {
    width: 100%;
  }
}
代码语言：javascript
复制
<div class="container">
  <!-- Story1 with Rollover Hover -->
  <div class="bit-2">
    <div class="imgHover">
      <img src="http://i.imgur.com/IbeKjJZ.jpg" width="100%">
      <p class="important">Hey there.</p>
      <button>Shop Now</button>
    </div>
  </div>
  <!-- Story2 with Rollover Hover -->
  <div class="bit-2">
    <div class="imgHover">
      <img src="http://i.imgur.com/0hFyr98.jpg" width="100%">
      <button>Shop Now</button>
    </div>
  </div>
  <!-- Story3 with Rollover Hover -->
  <div class="bit-2">
    <img src="http://i.imgur.com/0hFyr98.jpg" width="100%">
    <button class="static">Shop Now</button>
  </div>
  <!-- Story4 with Rollover Hover -->
  <div class="bit-2">
    <img src="http://i.imgur.com/IbeKjJZ.jpg" width="100%">
    <button class="static">Shop Now</button>
  </div>
  <!-- Skinny Banner -->
  <div class="bit-1">
    <div class="box">small banner</div>
  </div>
  <!-- Rewards -->
  <div class="bit-2">
    <div class="box">rewards</div>
  </div>
  <!-- Store Locator -->
  <div class="bit-2">
    <div class="box">store locator</div>
  </div>
</div>

​

尝试通过验证器运行代码，或者使用devtools进行检查。

票数 3
EN

Stack Overflow用户

发布于 2016-08-17 02:07:31

代码语言：javascript
复制
<ul class="img-list">
<li>
<img src="image 2.jpg" width="300" height="300" />
<span class="text-content"><span>Place Name</span></span>
</a>
</li>
</ul>

ul.img-list { 
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}

ul.img-list li {
display: inline-block;
height: 150px; 
margin: 0 1em 1em 0;
position: relative;
width: 150px;
}

span.text-content {
background: rgba(0,0,0,0.5); 
color: white;
cursor: pointer;
display: table;
height: 300px;
left: 0;
position: absolute;
top: 0; 
width: 300px;
opacity:0;
}

ul.img-list li:hover span.text-content {
display: table-cell;
text-align: center;
vertical-align: middle;
opacity:1;
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/38979843

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档