小编Bhu*_*wan的帖子
如何在CSS3中使用渐变边框？
我想要上面的结果,不能使用图像,因为div的高度不固定.
任何帮助都会得到满足.
推荐指数
解决办法
查看次数
Jquery slideToggle无法使用$(this).find
我想选择子'.comment'元素slideToggle它每次我点击'.item'元素.HTML代码:
<div class="row col-md-12 item">
<div class="col-md-4">Name</div>
<div class="col-md-4">degree of usage</div>
<div class="col-md-4">price</div>
<div class="col-md-12 comment">comment</div>
</div>
Js代码
$('.item').on('click', (event) => {
$('.item > .comment').slideUp(200);
$(this).find('.comment').slideToggle(200);
});
似乎slideUp效果可以正常工作,但$(this).find无法捕获其中的'.comment'元素.
推荐指数
解决办法
查看次数
选择表格中的行或列中的单选按钮
我有以下标记:
<table>
<tr>
<td><input type="radio" name="radio"></td>
<td><input type="radio" name="radio"></td>
<td><input type="radio" name="radio"></td>
</tr>
<tr>
<td><input type="radio" name="radio"></td>
<td><input type="radio" name="radio"></td>
<td><input type="radio" name="radio"></td>
</tr>
<tr>
<td><input type="radio" name="radio"></td>
<td><input type="radio" name="radio"></td>
<td><input type="radio" name="radio"></td>
</tr>
</table>这是一张3x3的桌子,里面有9个单选按钮.我想配置它,以便我可以:
- 每行仅选择1个单选按钮或
- 每列仅选择1个单选按钮
这可能没有任何JavaScript吗？谢谢!
推荐指数
解决办法
查看次数
表td中的边界半径和边界一起
我想给我的第一个和最后<td>一个，border-radius以便我的桌子看起来像一个圆桌。
首先，我将background应用于我的对象<td>，然后添加border-radius，我认为它可以很好地工作（background从角落四舍五入）。
之后，当我对我的边框应用边框时<td>，我看到了一件奇怪的事情（请参见下面的代码片段）。
因此，我的问题是为什么边框没有四舍五入为背景？
堆栈片段
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
text-align: center;
font: 13px Verdana;
}
table td {
border: 1px solid #000000;
padding: 20px;
background: red;
color: #ffffff;
}
table tbody tr:first-child td:first-child {
border-radius: 20px 0 0 0;
}
table tbody tr:first-child td:last-child {
border-radius: 0 20px 0 0;
}<table>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</table>推荐指数
解决办法
查看次数
随时间改变div的背景颜色
我在我的css中有这个div:
div {
background-color: white;
-webkit-animation-name: colorChange;
-webkit-animation-iteration-count: 1;
-webkit-animation-duration: 100s;
}
@-webkit-keyframes colorChange {
0% {
background-color: white;
}
50% {
background-color: yellow;
}
100% {
background-color: red;
}
}
唯一的问题是我需要div在转换完成后保持红色,然后不再回到初始的白色.任何建议或甚至更好的方式来实现这个在jquery？
我真的很想说"5分钟后换成黄色,再过5分钟换成红色并保持红色",而不是像这样过渡.
推荐指数
解决办法
查看次数
我如何在输入中使用FontAwesome:之前？
我想在:before(\F002手工玻璃标记)中使用FontAwesome .但它不起作用.(:重点工作)
我错过了什么？
.font-awesome {
border-radius: 15px;
border: 1px solid gray;
padding: 0 15px 0 30px;
line-height: 30px;
outline: none;
}
.font-awesome:focus {
border-color: lightblue;
}
.font-awesome:before {
font-family: FontAwesome;
content: "\f002";
}<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<input type="text" class="font-awesome" />推荐指数
解决办法
查看次数
bootstrap 4 手风琴无法正常工作，仅适用于第一个元素
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="collapse show">
<div class="card-body">
Lorem ipsum..
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="collapse">
<div class="card-body">
Lorem ipsum..
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</div>
<div id="collapseThree" class="collapse"> …推荐指数
解决办法
查看次数
如何仅使用CSS在移动设备上显示文本？
我有一个文本（以div为单位），该文本显示在桌面和移动屏幕上。
预期
我希望文字只显示在 @media only screen and (max-width: 768px)
如何
用或隐藏div
display:none还有其他解决方案吗？
推荐指数
解决办法
查看次数
在切换按钮中添加动画
我正在尝试使用HTML元素创建一个切换按钮.但我不能为此做动画.在这里,我尝试使用transitionCSS3属性.转换仅适用于某些元素,并且它不能按预期的switch-group:before元素工作.有没有办法改进更多的动画来获得一个有吸引力的动画？我尝试了很多链接,但这对我的代码没有帮助.我在下面附上了代码,
input[type=checkbox] {
display: none;
}
.switch-wrapper {
position: relative;
width: 70px;
border: 1px solid;
cursor: pointer;
height: 22px;
overflow: hidden;
}
.switch-on,
.switch-off {
display: block;
width: 50%;
float: left;
height: 100%;
transition: 0.5s;
}
.switch-on {
background-color: red;
margin-left: -100%;
text-indent: -18px;
line-height: 21px;
text-align: center;
}
.switch-off {
text-indent: 18px;
line-height: 21px;
text-align: center;
background-color: aliceblue;
}
.switch-group:before {
display: block;
content: "";
position: absolute;
height: 18px;
width: 18px;
margin: 2px;
background-color: #1b191e; …推荐指数
解决办法
查看次数
如果ul项包含li项,如何将css应用于外部div
我在渲染的HTML页面中有两个案例.
情况1:
<ul>
<li>A</li>
<li>B</li>
</ul>
<div class="test">Testing here</div>
案例2:
<ul></ul>
<div class="test"></div>
在案例1中,我想申请CSS到div,如果ul元素包含li元素).我不想要任何案例2.我想要一个没有任何jQuery/JavaScript的纯CSS方法.
推荐指数
解决办法
查看次数
悬停时更改图像大小
我正在尝试为我们公司网站上的某些图像添加悬停功能。问题是我需要很多图片（产品图片）而不是所有图片（图标等），我需要非常简单的实现，因为内容将由比我更了解编程的人处理。
我找到了一个非常巧妙的解决方案
img:hover,
img:focus{
width:192px;
height: 136px;
}
但这（当然）为所有图像添加了悬停功能，包括 PDF 图标等。有没有一种简单的方法可以指定哪些图像（表格的第一列）有悬停选项？因为这个解决方案会很棒，因为营销人员可以像过去那样简单地实施产品。
或者也许还有其他易于使用的解决方案？
推荐指数
解决办法
查看次数
在每个第10个div元素之后隐藏前4个div
我希望在每10个div元素之后隐藏第4个div元素.那么如何使用nth-of-typeOR或任何其他风格的CSS.
任何人都有我的问题的想法然后请更新我.
推荐指数
解决办法
查看次数
标签 统计
css ×11
html ×11
css3 ×4
javascript ×3
jquery ×3
bootstrap-4 ×1
display ×1
font-awesome ×1
gradient ×1
html-table ×1
radio-button ×1