悬停时调整背景大小
Posted
技术标签:
【中文标题】悬停时调整背景大小【英文标题】：Adjust background size on hover 【发布时间】：2017-03-29 05:08:21 【问题描述】：当你将鼠标悬停在图片上时，你会看到它会被我的代码中的半透明背景所取代。
透明背景应该覆盖所有图片，但是它只覆盖了文本所占据的区域。
我如何确保它覆盖整个图片，而不考虑框中的文字？
/*Programs*/
ul.img-list
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
ul.img-list li
display: inline-block;
width: 100%;
height: 100%;
margin: 0;
position: relative;
div.text-content
background: rgba(26,33,43,0.9);
color: white;
cursor: pointer;
display: table;
left: 0;
position: absolute;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
font-size: 20px;
font-family: Roboto;
line-height: 24px;
font-weight: 200;
text-align: center;
overflow-y: auto;
padding-right: 25px;
padding-left: 25px;
padding-top: 25px;
padding-bottom: 25px;
box-sizing: border-box;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
overflow-y: auto;
div.text-content div
display: block;
text-align: center;
vertical-align: middle;
ul.img-list li:hover div.text-content
opacity: 1;
/* Events page */
/*Event link button*/
.btn
background-color: transparent;
border-radius: 42px;
border: 2px solid #ffffff;
display: inline-block;
cursor: pointer;
font-family: Roboto;
line-height: 28px;
font-size: 24px;
padding: 5px 15px 5px 15px;
margin-right: 45px;
margin-left: 45px;
.btn:link
color: #ffffff;
text-decoration: none;
.btn:visited
color: #1b1c16;
text-decoration: none;
.btn:hover
background-color: #ffffff;
color: #1b1c16 !important;
.btn:active
position: relative;
top: 1px;
/*All events button*/
.evens_btn
background: ;
.events_btn>span
color: #f9c70f;
font-family: Roboto;
color: #ffffff;
font-size: 24px !important;
background: ;
text-decoration: none !important;
padding: 10px 0px 10px 0px;
.events_btn>i
color: #ffffff;
margin-right: 15px;
font-size: 50px;
.events_btn:link>i
color: #f9c70f;
.events_btn:visited>i
color: #ffffff;
text-decoration: none;
.events_btn:hover>i
color: #f9c70f;
.events_btn:active>i
color: #f9c70f;
.events_btn:link>span
color: #f9c70f;
.events_btn:visited>span
color: #ffffff;
text-decoration: none;
.events_btn:hover>span
color: #f9c70f ;
.events_btn:active>span
color: #f9c70f;
<ul class="img-list">
<li><img style="width: 100%; height: 100%;" src="http://www.sflsupport.org/wp-content/uploads/2016/06/Programs-11.jpg" />
<div class="text-content">
<div>
<h5 style="color: white; font-size: 38px; font-family: Montserrat; font-weight: 600; line-height: 42px; letter-spacing: 2px;">WEBINAR<br/>ARCHIVE</h5>
<hr style="border-top: 2px solid #ffffff; width: auto; margin: 10px 30px;"/>Throughout the years SFL has ammased the library of recorded webinars from some of the leading libertarian voices about numerous topics in philosophy, politics, and economics. How can the government fix the higher education bubble? What is Ayn Rand's theory of natural rights? Tune in to our videos for answers to these questions and many more.
<br>
<a class="btn" style="color: white; text-align: center; margin-top: 10px; padding-top: 5px; padding-bottom: 5px; padding-left: 30px; padding-right: 30px; text-decoration: none; font-size: 24px; font-weight: 600; border: 3px solid white; letter-spacing: 2px;" href="http://www.google.com/" target="_blank">READ MORE</a>
</div>
</div>
</li>
</ul>【问题讨论】：
【参考方案1】：从.text-content 中删除display:table;。还要添加bottom:0;。
【讨论】：
如果内容需要垂直居中，则添加另一个 div 作为 .text-content 的直接子级，并将 display: table CSS 属性应用于此。【参考方案2】：移除 display: table;，并使用 CSS Flexbox 的 align-content 属性将内容垂直居中对齐。
看看下面的sn-p：
/*Programs*/
ul.img-list
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
ul.img-list li
display: inline-block;
width: 100%;
height: 100%;
margin: 0;
position: relative;
div.text-content
background: rgba(26,33,43,0.9);
color: white;
cursor: pointer;
display: flex;
align-items: center;
left: 0;
position: absolute;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
font-size: 20px;
font-family: Roboto;
line-height: 24px;
font-weight: 200;
text-align: center;
overflow-y: auto;
padding-right: 25px;
padding-left: 25px;
padding-top: 25px;
padding-bottom: 25px;
box-sizing: border-box;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
overflow-y: auto;
div.text-content div
display: block;
text-align: center;
vertical-align: middle;
ul.img-list li:hover div.text-content
opacity: 1;
/* Events page */
/*Event link button*/
.btn
background-color: transparent;
border-radius: 42px;
border: 2px solid #ffffff;
display: inline-block;
cursor: pointer;
font-family: Roboto;
line-height: 28px;
font-size: 24px;
padding: 5px 15px 5px 15px;
margin-right: 45px;
margin-left: 45px;
.btn:link
color: #ffffff;
text-decoration: none;
.btn:visited
color: #1b1c16;
text-decoration: none;
.btn:hover
background-color: #ffffff;
color: #1b1c16 !important;
.btn:active
position: relative;
top: 1px;
/*All events button*/
.evens_btn
background: ;
.events_btn>span
color: #f9c70f;
font-family: Roboto;
color: #ffffff;
font-size: 24px !important;
background: ;
text-decoration: none !important;
padding: 10px 0px 10px 0px;
.events_btn>i
color: #ffffff;
margin-right: 15px;
font-size: 50px;
.events_btn:link>i
color: #f9c70f;
.events_btn:visited>i
color: #ffffff;
text-decoration: none;
.events_btn:hover>i
color: #f9c70f;
.events_btn:active>i
color: #f9c70f;
.events_btn:link>span
color: #f9c70f;
.events_btn:visited>span
color: #ffffff;
text-decoration: none;
.events_btn:hover>span
color: #f9c70f ;
.events_btn:active>span
color: #f9c70f;
<ul class="img-list"><li><img style="width: 100%; height: 100%;" src="http://www.sflsupport.org/wp-content/uploads/2016/06/Programs-11.jpg" /><div class="text-content"><div><h5 style="color: white; font-size: 38px; font-family: Montserrat; font-weight: 600; line-height: 42px; letter-spacing: 2px;">WEBINAR<br/>ARCHIVE</h5><hr style="border-top: 2px solid #ffffff; width: auto; margin: 10px 30px;"/>Throughout the years SFL has ammased the library of recorded webinars from some of the leading libertarian voices about numerous topics in philosophy, politics, and economics. How can the government fix the higher education bubble? What is Ayn Rand's theory of natural rights? Tune in to our videos for answers to these questions and many more.<br><a class="btn" style="color: white; text-align: center; margin-top: 10px; padding-top: 5px; padding-bottom: 5px; padding-left: 30px; padding-right: 30px; text-decoration: none; font-size: 24px; font-weight: 600; border: 3px solid white; letter-spacing: 2px;" href="http://www.google.com/" target="_blank">READ MORE</a></div></div></li></ul>希望这会有所帮助！
【讨论】：
是的，它也应该垂直居中。非常感谢您的加倍努力！ :) @Ira 这是我的荣幸！如果这个回答真的对你有帮助，也请采纳。【参考方案3】：/*Programs*/
ul.img-list
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
ul.img-list li
display: inline-block;
width: 100%;
height: 100%;
margin: 0;
position: relative;
div.text-content
background: rgba(26,33,43,0.9);
color: white;
cursor: pointer;
left: 0;
position: absolute;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
font-size: 20px;
font-family: Roboto;
line-height: 24px;
font-weight: 200;
text-align: center;
overflow-y: auto;
padding-right: 25px;
padding-left: 25px;
padding-top: 25px;
padding-bottom: 25px;
box-sizing: border-box;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
overflow-y: auto;
div.text-content div
display: table-cell;
text-align: center;
vertical-align: middle;
width: 100%;
height: 100%;
ul.img-list li:hover div.text-content
opacity: 1;
/* Events page */
/*Event link button*/
.btn
background-color: transparent;
border-radius: 42px;
border: 2px solid #ffffff;
display: inline-block;
cursor: pointer;
font-family: Roboto;
line-height: 28px;
font-size: 24px;
padding: 5px 15px 5px 15px;
margin-right: 45px;
margin-left: 45px;
.btn:link
color: #ffffff;
text-decoration: none;
.btn:visited
color: #1b1c16;
text-decoration: none;
.btn:hover
background-color: #ffffff;
color: #1b1c16 !important;
.btn:active
position: relative;
top: 1px;
/*All events button*/
.evens_btn
background: ;
.events_btn>span
color: #f9c70f;
font-family: Roboto;
color: #ffffff;
font-size: 24px !important;
background: ;
text-decoration: none !important;
padding: 10px 0px 10px 0px;
.events_btn>i
color: #ffffff;
margin-right: 15px;
font-size: 50px;
.events_btn:link>i
color: #f9c70f;
.events_btn:visited>i
color: #ffffff;
text-decoration: none;
.events_btn:hover>i
color: #f9c70f;
.events_btn:active>i
color: #f9c70f;
.events_btn:link>span
color: #f9c70f;
.events_btn:visited>span
color: #ffffff;
text-decoration: none;
.events_btn:hover>span
color: #f9c70f ;
.events_btn:active>span
color: #f9c70f;
<ul class="img-list"><li><img style="width: 100%; height: 100%;" src="http://www.sflsupport.org/wp-content/uploads/2016/06/Programs-11.jpg" /><div class="text-content"><div><h5 style="color: white; font-size: 38px; font-family: Montserrat; font-weight: 600; line-height: 42px; letter-spacing: 2px;">WEBINAR<br/>ARCHIVE</h5><hr style="border-top: 2px solid #ffffff; width: auto; margin: 10px 30px;"/>Throughout the years SFL has ammased the library of recorded webinars from some of the leading libertarian voices about numerous topics in philosophy, politics, and economics. How can the government fix the higher education bubble? What is Ayn Rand's theory of natural rights? Tune in to our videos for answers to these questions and many more.<br><a class="btn" style="color: white; text-align: center; margin-top: 10px; padding-top: 5px; padding-bottom: 5px; padding-left: 30px; padding-right: 30px; text-decoration: none; font-size: 24px; font-weight: 600; border: 3px solid white; letter-spacing: 2px;" href="http://www.google.com/" target="_blank">READ MORE</a></div></div></li></ul>【讨论】：
【参考方案4】：只需添加这个 Css：
.text-content div
height:1326px;
【讨论】：
以上是关于悬停时调整背景大小的主要内容，如果未能解决你的问题，请参考以下文章
jQuery UI droppable：悬停时调整元素大小不起作用
在 Force 有向图中将文本标签添加到 d3 节点并在悬停时调整大小