我想制作一个以背景图片上的标题开头的新闻框，但是当用户将鼠标悬停在它上面时，新闻标题和说明会填满背景图片，就像新闻栏一样{{3} }。
以下是我一起入侵的内容：
$(document).ready(function() {
$('.thumb-box').hover(function() {
$(this).find('.news-item').removeClass('only-title')
$(this).find('.news-item').addClass('title-and-desc');
$(this).find('.desc-on-image').removeClass('hidden');
}, function() {
$(this).find('.news-item').removeClass('title-and-desc');
$(this).find('.news-item').addClass('only-title');
$(this).find('.desc-on-image').addClass('hidden');
});
});.image-container {
position: relative;
text-align: center;
color: white;
}
.thumb-box {
width: 300px;
height: 240px;
background-size: cover;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: flex-end;
margin-bottom: 20px;
}
.only-title {
color: black;
background: rgba(255, 255, 255, .9);
margin: 0;
padding: 1em 1em 1em 1em;
cursor: pointer;
}
.title-and-desc {
color: black;
background: rgba(255, 255, 255, .9);
margin: 0;
padding: 1em 1em 1em 1em;
cursor: pointer;
animation-name: draw-up;
animation-duration: 1s;
}
@keyframes draw-up {
from {
padding: 1em 1em 1em 1em;
}
to {
padding: 1em 1em 8em 1em;
}
}
.clickable {
cursor: pointer;
}
.news-title {
color: black;
}
.news-title a {
color: black;
}
.news-title a:hover {
color: black;
text-decoration: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thumb-box img-responsive" style="background-image: url(/path/to/photo">
<div class="news-item only-title">
<a class="news-title" href="/article/{{$a.Slug}}">
<h4><strong> {{$a.Title}} </strong> </h4>
<div class="desc-on-image hidden">
{{$a.Teaser}} ...
</div>
</a>
</div>
</div>
问题有两个方面：
有点紧张。当鼠标从某个角度进入它们时，盒子跳了一下。
叠加的div一滑起就会跳下来。
我想知道如何解决这些问题，或者如何使用更强大的解决方案来执行相同的功能？
答案 0 :(得分：4)
Relative positioning ， overflow: hidden ， Absolute Positioning 和 transition
这可以在不使用javascript或Jquery的情况下实现。
外部分组container被赋予 position: relative 和 overflow: hidden 。
因此，无论container内部是什么，并且其宽度或高度都超过container，或者可能相对地放在container之外，那么 溢出 container并保持 隐藏 。
现在，我们使用 position: absolute 将slider与top保持一定距离，即100px。所以，现在它溢出了它的父div container。但由于其父级container上的 overflow: hidden ，它会被隐藏。
现在，使用css child combinator，每当父div [{1}}悬停时，我们都会使用 transition 向上滑动container。< / p>
slider.container{
position:relative;
background-image:url(https://picsum.photos/400);
height:200px;
width:300px;
cursor:pointer;
overflow:hidden;
}
.slider{
position:absolute;
top:100px;
width:100%;
height:200px;
background:rgba(255,255,255,0.7);
transition: top 1s;
}
.container:hover > .slider{
top:0;
}
答案 1 :(得分：2)
您只需使用CSS过渡即可简化代码。
这是一个示例，您可以轻松调整CSS属性以获得所需的效果。
.image-container {
position: relative;
text-align: center;
color: white;
}
.thumb-box {
width: 300px;
height: 200px;
background-size: cover;
background-repeat: no-repeat;
position:relative;
overflow:hidden;
}
.only-title {
color: black;
background: rgba(255, 255, 255, .9);
margin: 0;
padding: 1em 1em 1em 1em;
cursor: pointer;
position:absolute;
transition:1s;
top:60%;
height:100%;
left:0;
right:0;
}
.thumb-box:hover .only-title {
top:0;
}<div class="thumb-box img-responsive" style="background-image: url(https://lorempixel.com/400/200/)">
<div class="news-item only-title">
<a class="news-title" href="#">
<h4><strong> title</strong> </h4>
<div class="desc-on-image hidden">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ornare placerat placerat. Sed id nulla odio. Morbi lacinia ultrices velit, faucibus commodo torto
</div>
</a>
</div>
</div>
答案 2 :(得分：1)
纯css解决方案
Document.find(3)
.news-container{
overflow: hidden;
padding: 10px;
}
.news-item{
position: relative;
width: 220px;
height: 240px;
float: left;
background-size: cover;
overflow: hidden;
margin: 10px;
}
.news-item:after{
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #fff;
z-index: 0;
opacity: 0;
transition: 0.7s;
}
.news-item > img{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.news-description{
position: absolute;
width: 100%;
height: 100%;
top: -60px; /* this sets the visible part's height */
margin-top: 100%;
z-index: 1;
transition: 0.3s;
background: rgba(255,255,255,0.8);
}
.news-description h5{
display: block;
height: 80px; /* this is the hight of the title */
overflow: hidden;
padding: 10px;
margin: 0;
font-weight: bold;
}
.news-description p{
padding: 10px;
font-size: 14px;
}
.news-item:hover .news-description{
top: 0;
margin-top: 0;
}
将图像添加到<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="news-container">
<div class="news-item" style="background-image: url(https://picsum.photos/200/360/?random)">
<div class="news-description">
<h5>News One</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer iaculis laoreet sapien ac auctor.</p>
</div>
</div>
<div class="news-item" style="background-image: url(https://picsum.photos/200/400/?random)">
<div class="news-description">
<h5>News Two With A Slightly Longer Title</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer iaculis laoreet sapien ac auctor.</p>
</div>
</div>
<div class="news-item">
<img src="https://picsum.photos/220/400/?random)" alt="" />
<div class="news-description">
<h5>News Item With img Tag</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer iaculis laoreet sapien ac auctor.</p>
</div>
</div>
</div>作为内联css样式。在样式表中还为.news-item添加了background-size: cover;。
在.news-item中添加了img标记，并添加了相应的css规则作为添加图片的另一种方式。