Html，css：在悬停时更改行的边框颜色(Html,css: Change a row's border colow on hover)
我正在使用DataTables，我试图在行悬停时将行的顶部和底部边框更改为红色。 以下没有改变颜色。
table.dataTable.hover tbody tr:hover,
table.dataTable.hover tbody tr.odd:hover,
table.dataTable.hover tbody tr.even:hover,
table.dataTable.display tbody tr:hover,
table.dataTable.display tbody tr.odd:hover,
table.dataTable.display tbody tr.even:hover {
background-color: rgba(209, 231, 255, 0.5);
border-bottom: 1px solid red;
border-top: 1px solid red;
}
I am using DataTables and i am trying to change the row's top and bottom border to red on row hover. Following didn't change the color.
table.dataTable.hover tbody tr:hover,
table.dataTable.hover tbody tr.odd:hover,
table.dataTable.hover tbody tr.even:hover,
table.dataTable.display tbody tr:hover,
table.dataTable.display tbody tr.odd:hover,
table.dataTable.display tbody tr.even:hover {
background-color: rgba(209, 231, 255, 0.5);
border-bottom: 1px solid red;
border-top: 1px solid red;
}
Anyone knows how to properly do this ? jsfiddle: http://jsfiddle.net/d1zqsayh/
原文：https://stackoverflow.com/questions/26203691
2020-02-25 10:02
满意答案
你可以这样做：
table.dataTable tbody tr td{
border-bottom: 1px solid transparent;
}
table.dataTable tbody tr:hover td {
border-top: red 1px solid;
border-bottom: red 1px solid;
}
You can do something like this:
table.dataTable tbody tr td{
border-bottom: 1px solid transparent;
}
table.dataTable tbody tr:hover td {
border-top: red 1px solid;
border-bottom: red 1px solid;
}
相关问答
您必须在标签上显示padding ，而不是li标签。 .lefttabs li
{
list-style:none;
}
.lefttabs li a
{
list-style:none;
display:block;
padding: 0px 0px 30px 0px;
}
You have to display your padding to your a tag and not to your li tag. .lefttabs li
{
lis...
你可以单独在CSS中实现。 您只需要使:hover规则比td.highlight更具体。 尝试这个： #infotable tr:hover td,
#infotable tr:hover td.highlight
{
background:yellow;
}
示例小提琴 You can achieve this in CSS alone. You just need to make the :hover rule more specific than the td.highlight....
我知道答案已被标记为已回答，但我发现一个解决方案不使用calc而是使用nth-child ，它具有比calc更好的兼容性表 。 .outer {
position: relative;
overflow: hidden;
display: inline-block;
}
.myborder {
content: '';
position: absolute;
bottom: 5%;
left: 20%;
width: 40%;
heig...
更新.hvr-bubble-float-top:hover:before的border-bottom-color .hvr-bubble-float-top:hover:before 。 使用您的样式作为基础： #contact-form > .contact-submit > .hvr-bubble-float-top:hover:before,
#contact-form > .contact-submit > .hvr-bubble-float-top:focus:before,
#cont...
不幸的是，你还不能使用CSS来定位前一个兄弟。 不过，你可以将两个div放在一个容器中，然后将：hover应用于该容器。 HTML
Some text
Some text 2
CSS .container:hover .upperdiv,
.contai...
你应该把放在
We have a range of Education Facilities available for lease and hire
a.sidebarLink...
为您的链接提供ID：
然后使用这个css： #page1:hover { color: red; }
#page2:hover { color: blue; }
/* ... */
...
所以我在这里回答我自己的问题。将html保留为空，在CSS中添加'：before'的'content'，然后在悬停状态下更改'：before'..请参阅forked Codepen：
.material-icons.md1::before{
font-family: 'Material Icons';
font-weight: normal;
...
出于某种原因，当未在原始元素本身(动画之前)上设置border属性时，动画似乎不起作用。 将border属性添加到原始元素似乎解决了它。 基于MDN的可动画属性列表 ，似乎border-color和border-width是可动画的， border-style不是，这可能是我们必须在原始元素中添加它的原因。 但是只添加border-style: solid默认会在几乎所有浏览器中生成边框(如果不是全部)，因此最好指定border-width: 0以及它。 注意： 在IE10，IE11和Firefo...
你可以这样做： table.dataTable tbody tr td{
border-bottom: 1px solid transparent;
}
table.dataTable tbody tr:hover td {
border-top: red 1px solid;
border-bottom: red 1px solid;
}
在这里看到： http ： //jsfiddle.net/d1zqsayh/21/ You can do something li...
相关文章
Data Week: Becoming a data scientist Data Pointed,
...
网页上有很多功能是通过链接方式传递参数，这种功能链接普通样式就是一个超链接退出，如果将超链接的样式变成
...
Gao Yuanyuan from after 2005 drama " world fir
...
http://gumstix.org/create-a-bootable-microsd-card.h
...
As you know, I've been playing with Solr lately, tr
...
中文名: 即用即查HTML+CSS标签参考手册 作者: 李刚 图书分类: 网络 资源
...
In a time 有一次 Where the sun descends alone, 太阳孤独的降落
...
曲名： I COULD BE THE ONE 歌手： Donna Lewis 专辑： blue p
...
这篇文件写的非常好，推荐大家重温一下： http://highscalability.com/blog
...
Open [Tomcat install dir]\tomcat-users.xmlfor editi
...
最新问答
List lc = driver.findElements(By.cssSelector("table[id*='filter']")); for (WebElement row : lc) { List images = row.findElements(By.tagName("img")); for (WebElement image : images) { image.click(); } } List
我没有任何问题，但我能够通过启用我的弹出窗口拦截器(我使用更好的弹出窗口阻止程序 - Chrome网上应用店 )来重现你在运行Chrome 21.0.1180.89的Windows 7上遇到的问题。 如果您使用弹出窗口阻止程序，请尝试为jsfiddle /您正在使用的站点禁用它。 I didn't have any issues with it, but I was able to reproduce the problem you were having on Windows 7 runnin
opencv已经有开源的人脸识别的代码了，只需要安装一下，有训练好的关于人脸的xml文件，然后根据这两个xml文件，输入一张带有人脸的图片进行检测就好了。参考网址：http://www.cnblogs.com/mengdd/archive/2012/08/01/2619043.html 这里说的更详细一些。matlab是专门针对图像处理的，不过一般的用matlab实现的，用opencv也都可以做的到。有些时候将matlab代码转为opencv还是需要一定时间和一定功底的
您需要使用ProximitySensor来检测手机屏幕何时被覆盖。 这是一个例子： 在android中使用接近传感器 You need to use ProximitySensor to detect when the phone screen is covered. Here is an example: Using proximity sensor in android
我认为找到这个的最简单方法是搜索ProjectName列。 它似乎包含层次结构信息： select c.* from content c where ProjectName+' ' like '%Project 1 %' 额外的空间是确保Project 1与Project 10不匹配。 I found the way to solve. But the actual solution is given by Jayvee. Sorry I didnt know the method it ca
弄清楚了！ 它被链接到： searchText: 'Search for a member...', 这将自动填充搜索栏的内容，并尝试根据该搜索词找到用户。 删除此属性解决了这个问题。 Figured it out! It was linked to: searchText: 'Search for a member...', This will autofill the search bar with content and will attempt to find the user
错误2245也可能是密码历史记录问题。 新密码是最近使用的密码吗？ 编辑：看起来这个功能在Server 2003 SP 2之后破了。我在使用文档中的示例从C ++调用函数时遇到了同样的错误。 您可能需要使用NetUserSetInfo。 Error 2245 could also be a password history problem. Is the new password one that was used in the recent past? Edit: It looks like
我在网上搜索了很多，为我的问题找到答案。 我花了很多时间，所以我在这里贴出来帮助别人。 为了使GLEW与MinGW一起工作，您应该从GLEW网站下载源代码并放置 来自MinGW \ bin的gcc.exe 来自MinGW32 \ mingw32 \ bin的ar.exe 到GLEWs源文件夹并在该文件夹中创建并运行.bat，如下所示： gcc -DGLEW_NO_GLU -O2 -Wall -W -Iinclude -DGLEW_BUILD -o src/glew.o -c src/glew.
使用模板成员函数时，您需要使用template关键字，如下所示： my_postoffice.template get_postbox() 和 po.template get_postbox() cf here： http ： //ideone.com/W0owY1代码和这里： 我在哪里以及为什么要放置“template”和“typename”关键字？ 有关何时使用模板关键字的确切说明 You need to use the template keyword when using
你不能，至少在Devel :: REPL调用Data :: Dump :: Streamer的情况下。 DDS将始终编码不在\ x20- \ x7e范围内的任何字符。 您可以修改DDS以选择其他方式。 After reading the source of DDS, I came up with this patch based on the Perl Monks code: $ cat quote.rc { no warnings 'redefine'; sub Data::D
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
