在悬停时着色HTML表格边框

时间：2018-06-11 13:14:13

标签： html css

当我将鼠标悬停在其上时，我希望tr的顶部和底部边框能够改变颜色。我遇到的问题是悬停的tr覆盖了悬停样式（至少这是我认为正在发生的事情）。

在我的示例中，第一个项目正确悬停，但在第二个和第三个项目中，只有底部边框突出显示：

＆＃13;
＆＃13; 
table {
  border-collapse: collapse;
}

th {
  background-color: rgb(231, 231, 231);
}

td {
  border-bottom: 2px solid rgb(214, 214, 214);
  border-top: 2px solid rgb(214, 214, 214);
}

table tr:hover td {
  border-bottom: 2px solid red;
  border-top: 2px solid red;
}
＆＃13; 
<table>
  <tr>
    <th>COMPANY</th>
    <th>CONTACT</th>
    <th>COUNTRY</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
</table>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：5)

如果要保留2个px边框，则需要摆脱折叠，然后删除边框填充。然后，您可以使用兄弟选择器在悬停时更改正确的边框。

在下面，我刚刚在你的桌子上添加了一个thead和tbody，这样我们就知道只有身体元素会在悬停时发生变化

table {
 border-spacing:0;
}

th {
  background-color: rgb(231, 231, 231);
}

td {
  border-top: 2px solid rgb(214, 214, 214); /* make all cells have a top border */
}

tbody tr:last-child td {
  border-bottom: 2px solid rgb(214, 214, 214);  /* make the last row also have a bottom border */ 
}

tbody tr:hover td {
  border-color: red;    /* change all borders to red on hover (mainly because of the last child bottom border */
}

tbody tr:hover + tr td {
  border-top-color: red;  /* change any cells without a bottom border - make the next row have top border go red (so it looks like current row bottom border) */
}
<table>
<thead>
  <tr>
    <th>COMPANY</th>
    <th>CONTACT</th>
    <th>COUNTRY</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
</tbody>
</table>

答案 1 :(得分：3)

这是我不能使用崩溃时最接近的问题

  • 边界间隔：0;
  • border-top / bottom：1px而不是2px 

MATLAB crash file:C:\Users\YL\AppData\Local\Temp\matlab_crash_dump.8852-1:


------------------------------------------------------------------------
              abort() detected at Mon Jun 11 08:57:41 2018
------------------------------------------------------------------------

Configuration:
  Crash Decoding      : Disabled - No sandbox or build area path
  Crash Mode          : continue (default)
  Current Graphics Driver: Unknown hardware 
  Default Encoding    : windows-1252
  Deployed            : false
  Graphics card 1     : Intel Corporation ( 0x8086 ) Intel(R) HD Graphics 520 Version 21.20.16.4599
  Graphics card 2     : NVIDIA ( 0x10de ) NVIDIA GeForce 940M Version 10.18.13.5390
  Host Name           : LAPTOP-9IG7CG32
  MATLAB Architecture : win64
  MATLAB Entitlement ID: Unknown
  MATLAB Root         : C:\Program Files\MATLAB\R2016b
  MATLAB Version      : 9.1.0.441655 (R2016b)
  OpenGL              : hardware
  Operating System    : Microsoft Windows 10 Home
  Processor ID        : x86 Family 6 Model 78 Stepping 3, GenuineIntel
  Virtual Machine     : Java 1.7.0_60-b19 with Oracle Corporation Java HotSpot(TM) 64-Bit Server VM mixed mode
  Window System       : Version 10.0 (Build 17134)

Fault Count: 1


Abnormal termination:
abort()

Register State (captured):
  RAX = 00000000108ef2e8  RBX = 00000000108ef2e8
  RCX = 00000000043f7b60  RDX = 0000000000000000
  RSP = 00000000043f7ae0  RBP = 00000000043f8a70
  RSI = 00000000108ef2e8  RDI = 0000000000000000

   R8 = 0000000000000000   R9 = 00007fffcb650000
  R10 = 00000000108df287  R11 = 00000000108df287
  R12 = 0000000000000000  R13 = 00000000043f81a0
  R14 = 00000000108df218  R15 = 00000000108ef268

  RIP = 000000001071971a  EFL = 00000202

   CS = 0033   FS = 0053   GS = 002b

Stack Trace (captured):
[  0] 0x0000000010714153 C:\Program Files\MATLAB\R2016b\bin\win64\libmwfl.dll+00082259 fl::diag::thread_context::unspecified_bool+00000051
[  1] 0x0000000010712a68 C:\Program Files\MATLAB\R2016b\bin\win64\libmwfl.dll+00076392 fl::diag::stacktrace_base::capture+00000024
[  2] 0x0000000010715b2a C:\Program Files\MATLAB\R2016b\bin\win64\libmwfl.dll+00088874 fl::diag::thread_context::unspecified_bool+00006666
[  3] 0x00000000107184b7 C:\Program Files\MATLAB\R2016b\bin\win64\libmwfl.dll+00099511 fl::test::terminate_handler::~terminate_handler+00003207
[  4] 0x000000001a03dcf5   C:\Program Files\MATLAB\R2016b\bin\win64\mcr.dll+00580853 mnShutdownMCR+00022277
[  5] 0x000000001a03d9f8   C:\Program Files\MATLAB\R2016b\bin\win64\mcr.dll+00580088 mnShutdownMCR+00021512
[  6] 0x000000001a03db0a   C:\Program Files\MATLAB\R2016b\bin\win64\mcr.dll+00580362 mnShutdownMCR+00021786
[  7] 0x000000001a03afeb   C:\Program Files\MATLAB\R2016b\bin\win64\mcr.dll+00569323 mnShutdownMCR+00010747
[  8] 0x000000001a03c4b9   C:\Program Files\MATLAB\R2016b\bin\win64\mcr.dll+00574649 mnShutdownMCR+00016073
[  9] 0x00007fffcb6bee1d C:\Program Files\MATLAB\R2016b\bin\win64\MSVCR120.dll+00454173 raise+00000489
[ 10] 0x00007fffcb6c4a14 C:\Program Files\MATLAB\R2016b\bin\win64\MSVCR120.dll+00477716 abort+00000024
[ 11] 0x00007fffc786679a D:\ILearn\Deep Learning Packages\faster_rcnn-master\external\caffe\matlab\caffe_faster_rcnn\libglog.dll+00026522 google::LogMessage::RecordCrashReason+00000058
[ 12] 0x00007fffc786672c D:\ILearn\Deep Learning Packages\faster_rcnn-master\external\caffe\matlab\caffe_faster_rcnn\libglog.dll+00026412 google::LogMessage::SendToLog+00000828
[ 13] 0x00007fffc7866245 D:\ILearn\Deep Learning Packages\faster_rcnn-master\external\caffe\matlab\caffe_faster_rcnn\libglog.dll+00025157 google::LogMessage::Flush+00000197
[ 14] 0x00007fffc786831b D:\ILearn\Deep Learning Packages\faster_rcnn-master\external\caffe\matlab\caffe_faster_rcnn\libglog.dll+00033563 google::LogMessageFatal::~LogMessageFatal+00000027
[ 15] 0x00007fffa166a883 D:\ILearn\Deep Learning Packages\faster_rcnn-master\external\caffe\matlab\caffe_faster_rcnn\matcaffe\+caffe\private\caffe_.mexw64+02009219 mexFunction+00732179
[ 16] 0x00007fffa14a5072 D:\ILearn\Deep Learning Packages\faster_rcnn-master\external\caffe\matlab\caffe_faster_rcnn\matcaffe\+caffe\private\caffe_.mexw64+00151666
[ 17] 0x00007fffa152bde1 D:\ILearn\Deep Learning Packages\faster_rcnn-master\external\caffe\matlab\caffe_faster_rcnn\matcaffe\+caffe\private\caffe_.mexw64+00703969
[ 18] 0x00007fffa15287c4 D:\ILearn\Deep Learning Packages\faster_rcnn-master\external\caffe\matlab\caffe_faster_rcnn\matcaffe\+caffe\private\caffe_.mexw64+00690116
[ 19] 0x00007fffa15b7f71 D:\ILearn\Deep Learning Packages\faster_rcnn-master\external\caffe\matlab\caffe_faster_rcnn\matcaffe\+caffe\private\caffe_.mexw64+01277809 mexFunction+00000769
[ 20] 0x00000000fc5fc5d1 C:\Program Files\MATLAB\R2016b\bin\win64\libmex.dll+00116177 mexRunMexFile+00000129
[ 21] 0x00000000fc5fb2e2 C:\Program Files\MATLAB\R2016b\bin\win64\libmex.dll+00111330 mexFeature_mexver+00001794
[ 22] 0x00000000fc5fa506 C:\Program Files\MATLAB\R2016b\bin\win64\libmex.dll+00107782 mexUnlock+00020182
[ 23] 0x000000001bf646de C:\Program Files\MATLAB\R2016b\bin\win64\m_dispatcher.dll+00018142 Mfh_file::dispatch_fh_impl+00000434
[ 24] 0x000000001bf644b6 C:\Program Files\MATLAB\R2016b\bin\win64\m_dispatcher.dll+00017590 Mfh_file::dispatch_fh+00000062
[ 25] 0x000000001bf65827 C:\Program Files\MATLAB\R2016b\bin\win64\m_dispatcher.dll+00022567 Mfunction_handle::dispatch+00001015
[ 26] 0x000000001c17bfbd C:\Program Files\MATLAB\R2016b\bin\win64\m_lxe.dll+00901053 boost::serialization::singleton<boost::archive::detail::iserializer<boost::archive::binaryTerm_iarchive,ir::IrTree> >::get_instance+00811977
[ 27] 0x000000001c14fbc0 C:\Program Files\MATLAB\R2016b\bin\win64\m_lxe.dll+00719808 boost::serialization::singleton<boost::archive::detail::iserializer<boost::archive::binaryTerm_iarchive,ir::IrTree> >::get_instance+00630732
[ 28] 0x000000001c18728f C:\Program Files\MATLAB\R2016b\bin\win64\m_lxe.dll+00946831 boost::serialization::singleton<boost::archive::detail::iserializer<boost::archive::binaryTerm_iarchive,ir::IrTree> >::get_instance+00857755
[ 29] 0x000000001c187b75 C:\Program Files\MATLAB\R2016b\bin\win64\m_lxe.dll+00949109 boost::serialization::singleton<boost::archive::detail::iserializer<boost::archive::binaryTerm_iarchive,ir::IrTree> >::get_instance+00860033
[ 30] 0x000000001c189151 C:\Program Files\MATLAB\R2016b\bin\win64\m_lxe.dll+00954705 boost::serialization::singleton<boost::archive::detail::iserializer<boost::archive::binaryTerm_iarchive,ir::IrTree> >::get_instance+00865629
[ 31] 0x000000001c189c95 C:\Program Files\MATLAB\R2016b\bin\win64\m_lxe.dll+00957589 boost::serialization::singleton<boost::archive::detail::iserializer<boost::archive::binaryTerm_iarchive,ir::IrTree> >::get_instance+00868513
[ 32] 0x000000001c18932f C:\Program Files\MATLAB\R2016b\bin\win64\m_lxe.dll+00955183 boost::serialization::singleton<boost::archive::detail::iserializer<boost::archive::binaryTerm_iarchive,ir::IrTree> >::get_instance+00866107
[ 33] 0x000000001c18940d C:\Program Files\MATLAB\R2016b\bin\win64\m_lxe.dll+00955405 boost::serialization::singleton<boost::archive::detail::iserializer<boost::archive::binaryTerm_iarchive,ir::IrTree> >::get_instance+00866329
[ 34] 0x000000001c178041 C:\Program Files\MATLAB\R2016b\bin\win64\m_lxe.dll+00884801 boost::serialization::singleton<boost::archive::detail::iserializer<boost::archive::binaryTerm_iarchive,ir::IrTree> >::get_instance+00795725
[ 35] 0x000000001c0f9eab C:\Program Files\MATLAB\R2016b\bin\win64\m_lxe.dll+00368299 boost::serialization::singleton<boost::archive::detail::iserializer<boost::archive::binaryTerm_iarchive,ir::IrTree> >::get_instance+00279223
[ 36] 0x000000001c0f9740 C:\Program Files\MATLAB\R2016b\bin\win64\m_lxe.dll+00366400 boost::serialization::singleton<boost::archive::detail::iserializer<boost::archive::binaryTerm_iarchive,ir::IrTree> >::get_instance+00277324
[ 37] 0x000000001c0f3f8f C:\Program Files\MATLAB\R2016b\bin\win64\m_lxe.dll+00343951 boost::serialization::singleton<boost::archive::detail::iserializer<boost::archive::binaryTerm_iarchive,ir::IrTree> >::get_instance+00254875
[ 38] 0x000000001c0f3aa1 C:\Program Files\MATLAB\R2016b\bin\win64\m_lxe.dll+00342689 boost::serialization::singleton<boost::archive::detail::iserializer<boost::archive::binaryTerm_iarchive,ir::IrTree> >::get_instance+00253613
[ 39] 0x000000001c0f3991 C:\Program Files\MATLAB\R2016b\bin\win64\m_lxe.dll+00342417 boost::serialization::singleton<boost::archive::detail::iserializer<boost::archive::binaryTerm_iarchive,ir::IrTree> >::get_instance+00253341
[ 40] 0x000000001c2803e9 C:\Program Files\MATLAB\R2016b\bin\win64\m_lxe.dll+01967081 boost::serialization::singleton<boost::archive::detail::oserializer<boost::archive::polymorphic_oarchive,foundation::msg_svc::eventmgr::BaseEvent> >::get_instance+00003353
[ 41] 0x000000001c280372 C:\Program Files\MATLAB\R2016b\bin\win64\m_lxe.dll+01966962 boost::serialization::singleton<boost::archive::detail::oserializer<boost::archive::polymorphic_oarchive,foundation::msg_svc::eventmgr::BaseEvent> >::get_instance+00003234
[ 42] 0x000000001c142a61 C:\Program Files\MATLAB\R2016b\bin\win64\m_lxe.dll+00666209 boost::serialization::singleton<boost::archive::detail::iserializer<boost::archive::binaryTerm_iarchive,ir::IrTree> >::get_instance+00577133
[ 43] 0x0000000019cfb3bd C:\Program Files\MATLAB\R2016b\bin\win64\m_interpreter.dll+00504765 inEvalCmdWithLocalReturn+00000065
[ 44] 0x00000000fb608ced C:\Program Files\MATLAB\R2016b\bin\win64\libmwbridge.dll+00101613 mnGetPrompt+00012957
[ 45] 0x00000000fb609ba3 C:\Program Files\MATLAB\R2016b\bin\win64\libmwbridge.dll+00105379 mnParser+00001091
[ 46] 0x0000000019fe6841   C:\Program Files\MATLAB\R2016b\bin\win64\mcr.dll+00223297 mcr::runtime::setInterpreterThreadToCurrent+00025585
[ 47] 0x0000000019fe57d7   C:\Program Files\MATLAB\R2016b\bin\win64\mcr.dll+00219095 mcr::runtime::setInterpreterThreadToCurrent+00021383
[ 48] 0x0000000019fe5853   C:\Program Files\MATLAB\R2016b\bin\win64\mcr.dll+00219219 mcr::runtime::setInterpreterThreadToCurrent+00021507
[ 49] 0x0000000019fe6141   C:\Program Files\MATLAB\R2016b\bin\win64\mcr.dll+00221505 mcr::runtime::setInterpreterThreadToCurrent+00023793
[ 50] 0x00000000fd01d347   C:\Program Files\MATLAB\R2016b\bin\win64\iqm.dll+00578375 iqm::UserEvalPlugin::pre+00030679
[ 51] 0x00000000fd029e7c   C:\Program Files\MATLAB\R2016b\bin\win64\iqm.dll+00630396 iqm::UserEvalPlugin::pre+00082700
[ 52] 0x00000000fd017480   C:\Program Files\MATLAB\R2016b\bin\win64\iqm.dll+00554112 iqm::UserEvalPlugin::pre+00006416
[ 53] 0x00000000fd02c99a   C:\Program Files\MATLAB\R2016b\bin\win64\iqm.dll+00641434 iqm::UserEvalPlugin::pre+00093738
[ 54] 0x00000000fcff9a37   C:\Program Files\MATLAB\R2016b\bin\win64\iqm.dll+00432695 iqm::PackagedTaskPlugin::PackagedTaskPlugin+00000727
[ 55] 0x00000000fcffa08f   C:\Program Files\MATLAB\R2016b\bin\win64\iqm.dll+00434319 iqm::PackagedTaskPlugin::execute+00000575
[ 56] 0x00000000fcff9aa9   C:\Program Files\MATLAB\R2016b\bin\win64\iqm.dll+00432809 iqm::PackagedTaskPlugin::PackagedTaskPlugin+00000841
[ 57] 0x00000000fcff9f04   C:\Program Files\MATLAB\R2016b\bin\win64\iqm.dll+00433924 iqm::PackagedTaskPlugin::execute+00000180
[ 58] 0x00000000fcfd42fa   C:\Program Files\MATLAB\R2016b\bin\win64\iqm.dll+00279290 iqm::Iqm::setupIqmFcnPtrs+00071530
[ 59] 0x00000000fcfd41d3   C:\Program Files\MATLAB\R2016b\bin\win64\iqm.dll+00278995 iqm::Iqm::setupIqmFcnPtrs+00071235
[ 60] 0x00000000fcfb9e5a   C:\Program Files\MATLAB\R2016b\bin\win64\iqm.dll+00171610 iqm::Iqm::deliver+00003274
[ 61] 0x00000000fcfbad2f   C:\Program Files\MATLAB\R2016b\bin\win64\iqm.dll+00175407 iqm::Iqm::deliver+00007071
[ 62] 0x0000000100108173 C:\Program Files\MATLAB\R2016b\bin\win64\libmwservices.dll+01147251 services::system_events::PpeDispatchHook::dispatchOne+00019059
[ 63] 0x000000010010c3a3 C:\Program Files\MATLAB\R2016b\bin\win64\libmwservices.dll+01164195 sysq::addProcessPendingEventsUnitTestHook+00001923
[ 64] 0x000000010010c580 C:\Program Files\MATLAB\R2016b\bin\win64\libmwservices.dll+01164672 sysq::addProcessPendingEventsUnitTestHook+00002400
[ 65] 0x000000010010d685 C:\Program Files\MATLAB\R2016b\bin\win64\libmwservices.dll+01169029 sysq::getCondition+00002917
[ 66] 0x000000010010e4b2 C:\Program Files\MATLAB\R2016b\bin\win64\libmwservices.dll+01172658 svWS_ProcessPendingEvents+00000162
[ 67] 0x0000000019fe6b7d   C:\Program Files\MATLAB\R2016b\bin\win64\mcr.dll+00224125 mcr::runtime::setInterpreterThreadToCurrent+00026413
[ 68] 0x0000000019fe726a   C:\Program Files\MATLAB\R2016b\bin\win64\mcr.dll+00225898 mcr::runtime::setInterpreterThreadToCurrent+00028186
[ 69] 0x0000000019fde385   C:\Program Files\MATLAB\R2016b\bin\win64\mcr.dll+00189317 mcr_process_events+00010293
[ 70] 0x0000000019fe02d2   C:\Program Files\MATLAB\R2016b\bin\win64\mcr.dll+00197330 mcr_process_events+00018306
[ 71] 0x0000000019bfbd0e C:\Program Files\MATLAB\R2016b\bin\win64\MVMLocal.dll+00245006 mvm_server::inproc::LocalFactory::terminate+00070846
[ 72] 0x00000000fa942cd9   C:\Program Files\MATLAB\R2016b\bin\win64\mvm.dll+01125593 mvm::detail::initLocalMvmHack+00000521
[ 73] 0x00000000fa9432a5   C:\Program Files\MATLAB\R2016b\bin\win64\mvm.dll+01127077 mvm::detail::SessionImpl::privateSession+00000373
[ 74] 0x00000000fa9434b1   C:\Program Files\MATLAB\R2016b\bin\win64\mvm.dll+01127601 mvm::detail::SessionImpl::privateSession+00000897
[ 75] 0x0000000140006fd5 C:\Program Files\MATLAB\R2016b\bin\win64\MATLAB.exe+00028629
[ 76] 0x0000000140007661 C:\Program Files\MATLAB\R2016b\bin\win64\MATLAB.exe+00030305
[ 77] 0x00007fffe79b3034                   C:\WINDOWS\System32\KERNEL32.DLL+00077876 BaseThreadInitThunk+00000020
[ 78] 0x00007fffe9361551                      C:\WINDOWS\SYSTEM32\ntdll.dll+00464209 RtlUserThreadStart+00000033


This error was detected while a MEX-file was running. If the MEX-file
is not an official MathWorks function, please examine its source code
for errors. Please consult the External Interfaces Guide for information
on debugging MEX-files.

table {
   border-spacing:0;
}

th {
  background-color: rgb(231, 231, 231);
}

td {
  border-bottom: 1px solid rgb(214, 214, 214);
  border-top: 1px solid rgb(214, 214, 214);
}

table tr:hover td {
  border-bottom: 1px solid red;
  border-top: 1px solid red;
}

答案 2 :(得分：0)

只需删除border-collapse: collapse;并添加border-spacing:0

即可

答案 3 :(得分：0)

另一个选项“可以”使用：before或：after！

其中一个主要好处是它不会像边框那样改变盒子的大小。

以下是一个例子：

table tr {
    position: relative;
}

table tr:before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 2px;
    background: red;
}

“content”属性必须能够生成元素，但字符串可以为空（特别是当您想将此元素用作图形黑客时）。

编辑 - 我忘记了你的悬停状态：

table tr:hover:before {
    background: blue;
}

注意 - ：在父母的内容之前自动放置之前：after之后（在父母的标签关闭之前）。

相关问题
最新问题