Question

我有一张桌子，我在其中的td元素上应用了边框，现在当我将鼠标悬停在td时，我希望通过更改{的边框来选择tr内部有{1}}个元素，但td的右边框位于底部边框的顶部，因此角落不会改变颜色，我不希望这种情况发生。有什么想法吗？

CSS

td

HTML：

.advertisements table {
    text-align: center;
    font-size: 16px;
    border-collapse: collapse;
    width: 100%;
    margin-top: 10px;
}
.advertisements table td {
    border: 2px solid #F3FAFF;
    padding: 10px;
}
.advertisements table tr {
    background-color: #9EC630;
    background: -moz-linear-gradient(#9EC630, #87AB29);
    background: -o-linear-gradient(#9EC630, #87AB29);
    background: -webkit-linear-gradient(#9EC630, #87AB29);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #9EC630), color-stop(1, #87AB29));
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#9EC630, EndColorStr=#87AB29)";
    background: linear-gradient(#9EC630, #87AB29);
}
.advertisements table tr:not(:first-child):hover {
    background-color: #B8D669;
    background: -moz-linear-gradient(#B8D669, #9EC630);
    background: -o-linear-gradient(#B8D669, #9EC630);
    background: -webkit-linear-gradient(#B8D669, #9EC630);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #B8D669), color-stop(1, #9EC630));
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#B8D669, EndColorStr=#9EC630)";
    background: linear-gradient(#B8D669, #9EC630);
}
.advertisements table tr:not(:first-child):hover td {
    border-top: 2px solid #1A446C;
    border-bottom: 2px solid #1A446C;
    cursor: pointer;
}
.advertisements table tr:not(:first-child):hover td:first-child {
    border-left: 2px solid #1A446C;
} 
.advertisements table tr:not(:first-child):hover td:last-child {
    border-right: 2px solid #1A446C;
}
.advertisements table tr td ~ table tr:not(:first-child):hover {
    border-top: none;
} 
.advertisements table tr:first-child:hover {
    cursor: default;
}

来源在这里：http://dabblet.com/gist/c0a22609e6139ad83546

Answer 1

您的问题的答案在于浏览器resolve border conflicts的方式。

您可以将tr边框设置得更宽，或者更改border-style等等...

如果您对这些问题感到不满意，我建议您查看更复杂的解决方案，例如border gradients。

Answer 2

检查这是否对您有帮助。

DEMO

HTML

<div class="advertisements">
  <table cellspacing="0" cellpadding="0" >
  <tr>
   <td><div>1</div></td>
   <td><div>2</div></td>
   <td><div>3</div></td>
   <td><div>4</div></td>
  </tr>
  <tr>
   <td><div>1</div></td>
   <td><div>2</div></td>
   <td><div>3</div></td>
   <td><div>4</div></td>
  </tr>
  <tr>
   <td><div>1</div></td>
   <td><div>2</div></td>
   <td><div>3</div></td>
   <td><div>4</div></td>
  </tr>
  </table>
</div>

CSS

.advertisements table {
    text-align: center;
    font-size: 16px;
    /* border-collapse: collapse; */
    width: 100%;
    margin-top: 10px;
}
.advertisements div {
  background-color: #9EC630;

    background: -moz-linear-gradient(#9EC630, #87AB29);
    background: -o-linear-gradient(#9EC630, #87AB29);
    background: -webkit-linear-gradient(#9EC630, #87AB29);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #9EC630), color-stop(1, #87AB29));
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#9EC630, EndColorStr=#87AB29)";
    background: linear-gradient(#9EC630, #87AB29);
  border-bottom: 2px solid #fff;
  border-top: 2px solid #fff;
  padding: 10px;
  position: relative;
}
.advertisements div:after {
  width: 4px;
  background: #fff;
  content: " ";
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}
.advertisements tr:hover div {
  border-color: #1A446C
}
.advertisements tr:hover td:first-child div:before {
  width: 2px;
  background: #1A446C;
  content: " ";
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.advertisements td:last-child div:after {
  display: none
}
.advertisements tr:hover td:last-child div:after {
  width: 2px;
  background: #1A446C;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  display: block;
}

Answer 3

我发现这个问题非常有趣，所以我尝试对它进行一些编辑。

我找不到你想要的解决方案，但至少我发现了一些有趣的东西：

如果您在开始时将td的边框设置为1px宽，并且悬停的边框为2px宽，那么我会说：http://jsfiddle.net/Ax9eL/6/ < / LI>

但是，这个解决方案使得桌子移动不好/好。

我尝试border-collapse: separate; border-spacing:0px;而不是border-collapse: collapse;的另一件事看起来不太好：http://jsfiddle.net/Ax9eL/15/

希望有人能提出更好的解决方案;）

css - td元素溢出border-bottom的border-right

3 个答案: