文章/答案/技术大牛

发布

社区首页 >问答首页 >在onmouseclick时删除onmousout

问在onmouseclick时删除onmousout
EN

Stack Overflow用户

提问于 2011-01-24 04:06:21

回答 4查看 384关注 0票数 0

我有一个鼠标悬停事件来改变我的行颜色，我想让它在单击行时变为突出显示的颜色。我该怎么做呢？

<tr onmouseover="this.className=\'highlight\'" onmouseout="this.className=\'normal\'" onclick="showDetails('.$row['id'].')" class="normal">

html

回答 4

Stack Overflow用户

回答已采纳

发布于 2011-01-24 04:14:59

非常简单的例子，有很多不同的方法可以做到这一点。

笔记

我按照原始海报编辑了示例，添加了行标记。它现在更接近于它所展示的东西。

<html>
<head></head>
<body>
<script type="text/javascript">

function addHighlight(el) {
    if (el.className.indexOf('Selected') == -1) {
        el.className += ' Selected';
    }
}

function removeHighlight(el) {
    if (el.className.indexOf('hold') == -1) {
        el.className = el.className.replace('Selected','');
    }
}

function setHighlighted(el) {
    if (el.className.indexOf('hold') == -1) {
        el.className += ' hold';
    } else {
        el.className = el.className.replace(' hold','');
    }
}

</script>
<style type="text/css">

tr.Selected td {
  background-color: #f00;
}

</style>
<table>
<tbody>
<tr onClick="setHighlighted(this);" onMouseOver="addHighlight(this);" onMouseOut="removeHighlight(this);">
 <td>ipsum timor alle re</td>
 <td>ipsum timor alle re</td>
 <td>ipsum timor alle re</td>
 <td>ipsum timor alle re</td>
</tr>
<tr onClick="setHighlighted(this);" onMouseOver="addHighlight(this);" onMouseOut="removeHighlight(this);">
 <td>ipsum timor alle re</td>
 <td>ipsum timor alle re</td>
 <td>ipsum timor alle re</td>
 <td>ipsum timor alle re</td>
</tr>
<tr onClick="setHighlighted(this);" onMouseOver="addHighlight(this);" onMouseOut="removeHighlight(this);">
 <td>ipsum timor alle re</td>
 <td>ipsum timor alle re</td>
 <td>ipsum timor alle re</td>
 <td>ipsum timor alle re</td>
</tr>
<tr onClick="setHighlighted(this);" onMouseOver="addHighlight(this);" onMouseOut="removeHighlight(this);">
 <td>ipsum timor alle re</td>
 <td>ipsum timor alle re</td>
 <td>ipsum timor alle re</td>
 <td>ipsum timor alle re</td>
</tr>
</tbody>
</table>
</body>
</html>

票数 1

Stack Overflow用户

发布于 2011-01-24 04:14:41

例如，这一切都可以通过CSS来完成

tr { background:white; }
tr:hover { background:blue; }
tr:active { background:red; }

例如

票数 0

Stack Overflow用户

发布于 2011-01-24 04:15:36

<tr id="mytr_'.$row['id'].'" onmouseover="this.className=\'highlight\'" onmouseout="if(!this.isselected || this.isselected==0){this.className=\'normal\';}" onclick="showDetails('.$row['id'].')" class="normal">

在您的函数showDetails中，使用foreach或while重置所有选定的行，并在全部重置后放入clickedID.isselected=1；

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/4776171

复制

相似问题

问在onmouseclick时删除onmousout
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在onmouseclick时删除onmousoutEN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在onmouseclick时删除onmousout
EN