Javascript 将鼠标悬停在a<;中的文本上时,会触发“mouseout”悬停事件;td>;。这是一个传播问题吗?
如果预览Javascript 将鼠标悬停在a<;中的文本上时,会触发“mouseout”悬停事件;td>;。这是一个传播问题吗?,javascript,jquery,css,hover,transition,Javascript,Jquery,Css,Hover,Transition,如果预览index.html页面并将鼠标悬停在中的空白处,则编辑和删除工具将按预期显示。但是,如果您将鼠标悬停在内的文本上,则会触发鼠标出事件 以下是相关代码: index.js var tableBody = $('#tableBody'); $(document).ready(() => { updateTable(); tableBody.on('mouseover', 'td', displayTools).on('mouseout', 'td', hideTools);
index.html
页面并将鼠标悬停在
中的空白处,则编辑和删除工具将按预期显示。但是,如果您将鼠标悬停在
内的文本上,则会触发鼠标出
事件
以下是相关代码:
index.js
var tableBody = $('#tableBody');
$(document).ready(() => {
updateTable();
tableBody.on('mouseover', 'td', displayTools).on('mouseout', 'td', hideTools);
});
// async function getRecords(){
// }
function updateTable(){
prodData.forEach(record => {
tableBody.append(`<tr>
<td>
<div class="icons">
<i class="icon edit"></i>
<i class="icon trash"></i>
</div>
<div class="record-details" onmouseover="displayTools(this)">
<div class="item-name">${record.name}</div>
<div class="item-type">${record.type}</div>
</div>
</td>
<td>Active</td>
</tr>`);
});
}
function displayTools(e){
var iconDiv = $($(e.target).children()[0]);
if(!iconDiv.hasClass('visible')){
iconDiv.addClass('visible');
}
}
function hideTools(e){
var iconDiv = $($(e.target).children()[0]);
iconDiv.removeClass('visible');
}
这是一个传播问题吗?此外,我确信有一个比我正在尝试的更优雅的解决方案
多谢各位。我希望这个问题的格式正确。Matthew既然您使用的是JQuery,请尝试使用
mouseleave
事件,而不是mouseout
@npearson这似乎有效!我将深入研究文档,试图找出mouseleave
和mouseout
行为不同的原因。此解决方案唯一需要注意的是,将鼠标悬停在另一条记录上太快有时不会触发上一条记录的mouseleave
功能,使图标保持可见状态。非常感谢。是W3学校关于这个问题的一篇有用的帖子。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>Sentinel Project</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
</head>
<body>
<div class="nav-bar">
<div class="nav-item">Home</div>
<div class="nav-item">Statistics</div>
<div class="nav-item">Contact</div>
</div>
<div class="splash"></div>
<div class="container">
<div class="content">
<div class="cps-bar">
<div class="cps-item active">Producers</div>
<div class="cps-item">Consumers</div>
<div class="cps-item">Statistics</div>
</div>
<div class="content-body">
<table class="ui basic celled table">
<thead>
<tr>
<th class="fifteen wide">Producer</th>
<th class="one wide">Status</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
</div>
</div>
</div>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="scripts/producerData.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Raleway:100,400,700,900');
@import url('https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.14/semantic.min.css');
body{
margin: 0;
font-family: 'Raleway', sans-serif;
}
.splash {
position: relative;
width: 100vw;
height: 100vh;
background-image: url("https://images.unsplash.com/photo-1506371466305-dbad31f2b998?ixlib=rb-0.3.5&s=b09238e202f7a227a0f5376c4154dd2c&auto=format&fit=crop&w=2850&q=80");
background-size: cover;
background-position: center;
filter: grayscale(80%) opacity(80%);
}
.nav-bar {
display: flex;
justify-content: space-around;
height: 52px;
align-items: center;
}
.container {
position: absolute;
width: 100vw;
top: 0;
}
.content {
display: flex;
flex-direction: column;
width: 90vw;
margin: 0 auto;
transform: translateY(120px);
background-color: white;
border-radius: 2px;
}
.cps-bar {
display: flex;
justify-content: space-around;
}
.cps-item {
font-weight: 400;
padding: 12px 0;
}
.cps-item.active {
font-weight: 700;
}
.table {
width: 96% !important;
margin: 0 auto !important;
}
.icons {
float: left;
width: 0px;
margin: auto;
visibility: hidden;
opacity: 0;
transition: width 0.2s, opacity 0.1s 120ms;
}
.record-details {
float: left;
}
.visible {
visibility: visible;
width: 50px;
opacity: 1;
}