小编ath*_*thi的帖子
单击外部关闭div
我想通过单击其中的关闭链接或通过单击该div之外的任何位置来隐藏div.
我正在尝试关注代码,它通过正确单击关闭链接打开并关闭div,但如果我有问题通过单击div之外的任何位置关闭它.
$(".link").click(function() {
$(".popup").fadeIn(300);
}
);
$('.close').click(function() {
$(".popup").fadeOut(300);
}
);
$('body').click(function() {
if (!$(this.target).is('.popup')) {
$(".popup").hide();
}
}
);<div class="box">
<a href="#" class="link">Open</a>
<div class="popup">
Hello world
<a class="close" href="#">Close</a>
</div>
</div>22
推荐指数
推荐指数
3
解决办法
解决办法
9万
查看次数
查看次数
即使没有可滚动的内容,也会出现css溢出滚动条
我正在使用溢出:滚动像下面的代码,我遇到的问题是即使没有文本滚动条仍然显示.
关于w3schools的演示:http://www.w3schools.com/cssref/tryit.asp
？filename = trycss_overflow 你看到即使你不能水平滚动(左或右),仍然有一个滚动条.如果没有什么可以滚动到.这是有意义的,我试图让它在滚动条不出现的地方
<style type="text/css">
div.scroll {
background-color: #00FFFF;
width: 100px;
height: 100px;
overflow: scroll;
}
</style>
<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
14
推荐指数
推荐指数
2
解决办法
解决办法
8237
查看次数
查看次数
如何获取特定 ul 的选中复选框
我正在创建一个动态 ul 并尝试仅获取特定 ul 的复选框。
$(document).on("click", "input:checkbox[name=filter]:checked", function() {
var flags = Array();
$("input:checkbox[name=filter]:checked").each(function() {
flags.push($(this).val());
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dropdown-list">
<li><input type="checkbox" name="filter" value="form">Form</li>
<li><input type="checkbox" name="filter" value="anonymise">Anonymise</li>
<li><input type="checkbox" name="filter" value="priority">Priority</li>
<li><input type="checkbox" name="filter" value="question">Question</li>
</ul>
<ul class="dropdown-list">
<li><input type="checkbox" name="filter" value="form">Form</li>
<li><input type="checkbox" name="filter" value="anonymise">Anonymise</li>
<li><input type="checkbox" name="filter" value="priority">Priority</li>
<li><input type="checkbox" name="filter" value="question">Question</li>
</ul>
<ul class="dropdown-list">
<li><input type="checkbox" name="filter" value="form">Form</li>
<li><input type="checkbox" name="filter" value="anonymise">Anonymise</li>
<li><input type="checkbox" name="filter" value="priority">Priority</li>
<li><input type="checkbox" name="filter" value="question">Question</li>
</ul>所有三个UL都是相同的，在这种情况下，我如何才能获得特定 …
5
推荐指数
推荐指数
1
解决办法
解决办法
2408
查看次数
查看次数
你如何获得一个职位:绝对; 位置上方的元素:相对; 一
你可以在这个小提琴中看到问题.
我有一个绝对定位的元素,其z-index为2,相对定位的元素的z-index为1.相对定位的元素包含绝对定位的元素.我认为z-index:2元素会显示在z-index上面:1个项目,但事实并非如此.有没有办法解决这个问题,以便z-index:2项首先是z-index:1项？
div {
background: green;
position: relative;
width: 100%;
z-index: 1;
}
span {
top: 0;
right: 0;
z-index: 2;
position: absolute;
border: solid 1px red;
height: 70px;
background: white;
}<div>
Row 1
<span>I thought this would show above 'Row 2'</span>
</div>
<div>
Row 2
</div>5
推荐指数
推荐指数
1
解决办法
解决办法
3185
查看次数
查看次数
将跨度与其容器顶部对齐
似乎当 line-height 大于 1.1 倍 font-size 时，文本会在行中垂直居中。它可以垂直对齐吗？
在这个例子中
p {
background-color: pink;
font-size: 20px;
line-height: 40px
}
span {
background-color: lightblue;
}<p>
<span>Hello World</span> Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
</p>我希望文本对着粉红色框的顶部。所有额外的粉红色空间都将在蓝色下方，而不是在每条线的上方和下方分开。蓝色的盒子会与粉红色的顶部对接。我还没有找到vertical-align: top或添加line-height到跨度来帮助。
（编辑以显示文本可能很长。）
5
推荐指数
推荐指数
2
解决办法
解决办法
2549
查看次数
查看次数
使用flexbox链接应该在同一行
在下面的代码中,我希望所有三个框具有相同的高度,并且三个框中的链接应该在同一行中,如下面的屏幕截图所示.我使用flexbox来做这件事.请帮忙.
.wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
padding-top: 35px;
padding-bottom: 35px;
background-color: pink;
}
.wrapper div:not(:last-child) {
border-right: 1px solid #fdfdfd;
}
.wrapper div {
flex-basis: 33%;
text-align: center;
padding: 10px 4%;
}<div class="wrapper">
<div>
<span>Heading1</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, scelerisque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
<a href="">Link1</a>
</div>
<div>
<span>Heading2</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, …3
推荐指数
推荐指数
1
解决办法
解决办法
81
查看次数
查看次数
在 Flexbox 中的项目之间添加等距离的垂直线
我需要在弹性盒中的项目之间添加垂直线。为每个项目添加了右边框，但垂直线不在中心。请找到下面的代码。有人可以帮忙吗？
.details-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 30px;
padding-bottom: 30px;
background-color:pink;
}
.details-wrapper div {
flex-basis: 25%;
text-align: center;
border-right: 1px solid #fff;
}
.details-wrapper span {
display: block;
margin-top: 30px;
margin-bottom: 34px;
font-size: 24px;
color: #000;
}
.details-wrapper p {
font-size: 16px;
color: #000;
}<div class="details-wrapper">
<div>
<span>Where does it come from</span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div>
<span>Where does it come from</span>
<p>Lorem Ipsum is simply …2
推荐指数
推荐指数
1
解决办法
解决办法
8989
查看次数
查看次数
仅倾斜元素的右侧
我需要做这样的事情
现在我已经看起来像这样，顺便说一句，我正在使用引导程序3。
这是我现在的代码
/* nav stuff */
ul,
li,
a {
display: inline-block;
text-align: center;
}
/* appearance styling */
ul {
/* hacks to make one side slant only */
overflow: hidden;
}
li {
background-color: $white;
transform: skewX(-20deg);
-ms-transform: skewX(-20deg);
-webkit-transform: skewX(-20deg);
}
li a {
padding: 3px 15px 3px 10px;
text-decoration: none;
transform: skewX(20deg);
-ms-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="breadcrumb">
<li><a href="">Home</a></li>
<li><a href="#">Products</a></li>
</ul>我现在在第一个元素上只有一个问题:(
2
推荐指数
推荐指数
1
解决办法
解决办法
2547
查看次数
查看次数
仅缩放背景图像
我只想缩放背景图像
.prod_img:hover {
webkit-transform: scale(1.04);
-moz-transform: scale(1.04);
-o-transform: scale(1.04);
-ms-transform: scale(1.04);
transform: scale(1.04);
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
.prod_img {
content: ' ';
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
height: 580px;
width: 300px;
}
.protransparentbg {
position: absolute;
background: rgba(51, 51, 51, .8);
}<<div id="prod_main">
<div id="product_content">
<li class="prod_img …2
推荐指数
推荐指数
1
解决办法
解决办法
2万
查看次数
查看次数
使用flexbox之间的空间
我有4块,我需要使用flexbox添加空间,如下面的屏幕截图所示: 
.
.container {
display: flex;
flex-wrap: wrap;
}
.block {
width: 50%;
}<div class="container">
<div class="block">
<h5>New</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien, a scelerisque neque.</p>
</div>
<div class="block">
<h5>Heading</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p>
</div>
<div class="block">
<h5>Cras conva</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p>
</div>
<div class="block">
<h5>Cras nita</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. …0
推荐指数
推荐指数
1
解决办法
解决办法
320
查看次数
查看次数