我的网站: http://acamate.com/a/index.php
我想在鼠标过来时放大作业框。我用css做了它,但是当框放大时,底线将变为底线。
我想像 fiverr.com 一样。在 fiverr 中,当框放大时,底线不会影响,并且还显示用户名。我该怎么做?CSS、jQuery 或 Javascript。谢谢你的帮助
https://www.fiverr.com/categories/online-marketing/#layout=auto&page=1
我的代码:
风格.css
#box {margin-top:31px; padding:1px;margin-left:30px; height:234px;float:left;width:218px;background-color:#fff;box-shadow: 0 0 3px;
-webkit-transition-property: height;
-webkit-transition-timing-function;
ease-in;
-webkit-transition-duration:0.1s;
-webkit-transition-delay:0.0s;
}
#box img{width:218; height;147px;}
#box:hover {
height: 254px;}
.PHP
echo'<div id="box"><img src='.$categ2.' style=color:#555555>'.$categ1.'</a></div>';
好的,如果您在提供的网站上注意到,当您将鼠标悬停在项目上时,正在发生一些其他事情:
- 四四方方的项目本身不会增加其高度,而是具有固定的高度(悬停时相同(和溢出:隐藏应用于它
- 还有一个内部包装器(改变其高度(,里面有两个子div,一个是可见的,一个是隐藏的。
- 将鼠标悬停在盒装物品上时,内部包装纸将其高度更改为更大的高度,以显示隐藏在里面的div 子项
- 你悬停的那个下面的四四方方的项目被一些上边距推了一下,如果你有一个固定的网格大小,但不是在全宽网格上,你可以只通过 CSS 复制,通过一些第 n 个子规则,如果你有一个固定的网格大小,而不是在全宽网格上,不仅使用 CSS,你将需要一些 JS 来做到这一点
但是,如果您只希望将鼠标悬停在项目上时行保持不变,则可以:(还有更多解决方案,但首先想到的是这些解决方案(
- 解决方案 1 将
- boxdiv 的内容包裹在另一个包装器中,并在悬停时像这样玩内部包装器的高度(请参阅演示(
*,
*:after,
*:before {
box-sizing: border-box;
}
#main {
padding: 20px;
}
.box {
width: 218px;
height: 257px;
/*set the outer parent height to match the height of initial content + hidden content + some margin push*/
overflow: hidden;
float: left;
margin-top: 0;
margin-left: 30px;
padding: 1px;
transition: all .2s ease-in-out;
}
.inner-box-content {
height: 230px;
background-color: #fff;
box-shadow: 0 0 3px;
transition: all .2s ease-in-out;
}
.initial-content {
height: 220px;
}
.hovered-content {
opacity: 0;
height: 30px;
background: cyan;
transition: all .2s ease-in-out;
}
.box:hover .inner-box-content {
height: 250px;
/*show the hidden div: add up the initial-content height + hovered-content height*/
}
.box:hover .hovered-content {
opacity: 1;
}
<div id='main'>
<div class='box'>
<div class='inner-box-content'>
<div class='initial-content'>
Just your regular css box here
</div>
<div class='hovered-content'>
A sneaky content over here!
</div>
</div>
</div>
<div class='box'>
<div class='inner-box-content'>
<div class='initial-content'>
Just your regular css box here
</div>
<div class='hovered-content'>
A sneaky content over here!
</div>
</div>
</div>
<div class='box'>
<div class='inner-box-content'>
<div class='initial-content'>
Just your regular css box here
</div>
<div class='hovered-content'>
A sneaky content over here!
</div>
</div>
</div>
<div class='box'>
<div class='inner-box-content'>
<div class='initial-content'>
Just your regular css box here
</div>
<div class='hovered-content'>
A sneaky content over here!
</div>
</div>
</div>
<div class='box'>
<div class='inner-box-content'>
<div class='initial-content'>
Just your regular css box here
</div>
<div class='hovered-content'>
A sneaky content over here!
</div>
</div>
</div>
<div class='box'>
<div class='inner-box-content'>
<div class='initial-content'>
Just your regular css box here
</div>
<div class='hovered-content'>
A sneaky content over here!
</div>
</div>
</div>
<div class='box'>
<div class='inner-box-content'>
<div class='initial-content'>
Just your regular css box here
</div>
<div class='hovered-content'>
A sneaky content over here!
</div>
</div>
</div>
<div class='box'>
<div class='inner-box-content'>
<div class='initial-content'>
Just your regular css box here
</div>
<div class='hovered-content'>
A sneaky content over here!
</div>
</div>
</div>
<div class='box'>
<div class='inner-box-content'>
<div class='initial-content'>
Just your regular css box here
</div>
<div class='hovered-content'>
A sneaky content over here!
</div>
</div>
</div>
<div class='box'>
<div class='inner-box-content'>
<div class='initial-content'>
Just your regular css box here
</div>
<div class='hovered-content'>
A sneaky content over here!
</div>
</div>
</div>
<div class='box'>
<div class='inner-box-content'>
<div class='initial-content'>
Just your regular css box here
</div>
<div class='hovered-content'>
A sneaky content over here!
</div>
</div>
</div>
</div>
或
- 解决方案 2
- 您可以使用负的下边距值(隐藏内容的高度(进行拉动,当悬停时,像这样(见演示(
.box {
margin-top: 31px;
padding: 1px;
margin-left: 30px;
height: 234px;
float: left;
width: 218px;
background-color: #fff;
box-shadow: 0 0 3px;
/* -webkit-transition-property: height; */
/* -webkit-transition-duration: 0.1s; */
/* -webkit-transition-delay: 0.0s; */
transition: all .2s ease-in-out;
}
.box:hover {
height: 254px;
/*add increased height difference by 20px*/
margin-bottom: -20px;
/*a negative value meaning the height of your inner content or some increased height difference*/
}
<div id='main'>
<div class='box'>
A box
</div>
<div class='box'>
A box
</div>
<div class='box'>
A box
</div>
<div class='box'>
A box
</div>
<div class='box'>
A box
</div>
<div class='box'>
A box
</div>
<div class='box'>
A box
</div>
<div class='box'>
A box
</div>
<div class='box'>
A box
</div>
<div class='box'>
A box
</div>
<div class='box'>
A box
</div>
<div class='box'>
A box
</div>
<div class='box'>
A box
</div>
</div>
希望这有帮助!
虽然这不是完整的答案,但你可能想看看它:http://jsfiddle.net/7qoxh0sw/
.html:
<div class="box">
<h1>1</h1>
<div>"user details"</div>
</div>
<div class="box">
<h1>2</h1>
<div>"user details"</div>
</div>
<div class="box">
<h1>3</h1>
<div>"user details"</div>
</div>
<div class="box">
<h1>4</h1>
<div>"user details"</div>
</div>
<div class="box">
<h1>5</h1>
<div>"user details"</div>
</div>
<div class="box">
<h1>6</h1>
<div>"user details"</div>
</div>
<div class="box">
<h1>7</h1>
<div>"user details"</div>
</div>
.css
.box{
/*important css*/
height: 150px;
width: 100px;
display: inline-block;
transition: margin 1s;
position: relative;
margin: 10px;
/*useless css - used only for visuals*/
background: #aaa;
color: white;
text-align: center;
}
.box div{
/*important css*/
display: block;
height: 0px;
position: absolute;
top: 100%;
transition: height 1s;
width: 100%;
/*useless css - used only for visuals*/
background: red;
text-align: center;
}
.box:hover{
/*60px because 50px(from next css rule) + 10px(from margin in `.box` rules)*/
margin-bottom: 60px;
}
.box:hover div{
height: 50px;
}
这应该让您对实现所需效果的 css 有一个基本的了解。您需要做的就是将html更改为类似的格式,其中用户详细信息是div class="box"
的子div,具有绝对位置。休息只是悬停在盒子div 上的 css 效果。