Question

如果您预览index.html页面并将鼠标悬停在<tr>内的空白处，则编辑和删除工具会按预期显示。但是，如果将鼠标悬停在<td>内的文字上，则会触发mouseout事件。

以下是相关代码：

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');
}

index.html

    <!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>

index.scss

@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;
}

这是传播问题吗？此外，我确信有一个比我尝试的更优雅的解决方案。

非常感谢你。我希望这个问题格式正确马修

当鼠标悬停在文本中时，会触发`mouseout`悬停事件。这是传播问题吗？

0 个答案: