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

CSS .container:hover .upperdiv,

.contai...

你应该把放在

.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