个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试构建一个表格(填充了实际的表格数据)，并在悬停时获得一行的轮廓效果。我尝试了几个想法，但跨浏览器问题阻碍了我。很想听听任何想法。
想法 #1:将鼠标悬停在 上时添加 CSS outline。适用于 IE8 和 FF3，但不适用于 IE7 或 Chrome(Webkit，所以也可能是 Safari)。为简洁起见，省略了悬停的实际实现:
<table style="margin:10px;width:800px">
<tbody>
<tr style="outline:red solid 3px">
<td>Test 1</td>
<td>Test 2</td>
</tr>
</tbody>
</table>
想法 #2:在 下放置一个比 更宽/更高的
z-index 堆叠
z-index 并在几个不同的浏览器中尝试了代码之后，我感到非常沮丧。我在这里尝试的堆叠/排序可能太复杂，无法在不同的浏览器中工作。
使用 jquery-ui 和 Position (http://wiki.jqueryui.com/Position) 的示例代码:
[已删除无效代码链接]
最佳答案
2 听起来非常复杂。这个怎么样:
tr:hover td{ outline: red solid 3px}
编辑
试试这个:
<script type="text/javascript">
$(document).ready(function(){
$("tr").hover(
function(){
$(this).css({"outline":"red solid 3px"});
},
function(){
$(this).css({"outline":"red solid 0px"});
}
);
});
</script>
哎呀..这在 webkit 中仍然失败。
编辑
好的，再试一次......
Webkit 尊重 TR 大纲如果你给 TR "display:block"，那么，下面的工作:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<title>Test</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css">
table {
}
tr {
outline-color: #f00;
outline-style: solid;
outline-width: 0px;
display: block
}
.thick {
outline-width:3px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("td").hover(
function(){
$(this).parent().addClass("thick");
},
function(){
$(this).parent().removeClass("thick");
}
);
});
</script>
</head>
<body>
<table style="margin:10px;width:800px">
<tbody>
<tr>
<td>Test 1</td>
<td>Test 2</td>
</tr>
<tr>
<td>Test 3</td>
<td>Test 4</td>
</tr>
</tbody>
</table>
</body>
</html>
关于javascript - 悬停时表格行轮廓的想法？ CSS 大纲在 Webkit 中的 tr 上失败，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1957543/
25
4
0
如果我需要检测 Firefox，我使用了以下代码: var firefox = !(window.mozInnerScreenX == null); 我很好奇是否有类似的东西可以在不检查用户代理字符串
我正在开发我的第一个Windows窗体应用程序以使用WebKit.Net。我需要连接到https站点并弹出身份验证表单。使用.Net内置的浏览器，身份验证表单会自动弹出，但是WebKit只是将我放到4
就像您可以将 -webkit-gradient 添加到 -webkit-box-reflect 一样，您可以对反射执行转换吗？我正在反射的图像有一个 Angular ，我想尝试旋转反射或稍微倾斜它以使
我有一个加载一些网页的 QWebView，但是当鼠标被按下并拖动时的问题是它选择了所有阻碍它的东西。 有什么办法可以摆脱这个吗？？我不想选择文本和其他项目。， 如果我限制 mouseMove 和 mo
我对编程和创建程序真的很陌生。最近我在浏览 iTunes 文件夹时看到了一个 .css 文件。我打开它，看到很多 -webkit 样式来设置界面样式。 我可以使用 webkit 来设置 C++、.NE
这个问题在这里已经有了答案: How do I fix inconsistent Textarea bottom margin in Firefox and Chrome? (4 个回答) 4年前关闭
我希望自定义webkit-scrollbar为悬停状态设置不同的背景颜色动画。下面的代码在悬停时更改颜色，但不设置任何动画。它可以在div上运行，所以我怀疑webkit-scrollbar在过渡时效果
我正在尝试评估 WebKit 补丁的可能性，该补丁将允许所有渲染的图形渲染到完全透明的背景上。 想要的效果是呈现完全没有任何背景的 Web 内容，它应该看起来漂浮在桌面上(或浏览器窗口后面显示的任何内
这是 HTML 代码: A B C 这是 CSS 代码: .row { line-height:0;} .item { line-hei
我经常看到这样的 css 动画代码: @-webkit-keyframes anim{ 0{ -webkit-transform: perspective(400px) rotate3d(
我想为元素的 -webkit-transform: rotateX() 设置动画，同时允许元素保持其 -webkit-transform: rotate() 属性不变。考虑以下代码: @-webkit
CSS3 规则带来了许多有趣的特性。 取border-radius ， 例如。该标准规定，如果您编写此规则: div.rounded-corners { border-radius: 5px; }
我在想: 有没有人考虑过为嵌入式 Javafx 2.0 Webkit 浏览器或新的 QT5 - Webkit 实现 webdriver-interface。 有人对朝着这个方向发展的一些 Github
我正在尝试使用 WebKit 创建 Vala 程序。这是我编译它的方式: valac --pkg gtk+-3.0 --pkg granite --pkg glib-2.0 --pkg webkitg
我刚刚开始使用 webkit，我想先自己执行构建。我对如何使用 nightly sources of webkit 进行编译有点困惑。主 webkit 站点上的构建说明说要使用整个 SVN 树来执行完
我在做一些我认为很简单的事情时遇到了问题。读取输入字段的值，然后将该值写入文本文件。我得到它的工作，但只是部分和不一致。发生的情况是，文本 a) 被截断(并非所有在该字段中输入的数据都写入文件)和 b
我在使用 -webkit-animation 时遇到内存问题。 原则 我想为渐变背景制作动画。由于它们在关键帧中不可设置动画，我将每个背景放在不同的 div 中，并且我正在使用那些 div 不透明度和
困境: 在我的 CSS 文件中，我有这个: div { -webkit-transform: scale(0.5); } 在我的 jQuery 中，我稍后会这样做: $('div).css('
我正在尝试构建网络爬虫。 我需要两件事: 将 HTML 转换为 DOM 对象。 按需执行现有的 JavaScript。我期望的结果是一个 DOM 对象，其中执行加载的 JavaScript 已经执行。
似乎在元素上应用 webkit-transform 属性，或者它的父元素具有 webkit-over-flowing-scrolling: touch 完全打破了滚动中的滚动根本不起作用。 有没有人遇
我是一名优秀的程序员,十分优秀！