jquery - 在表格的任何 <td> 悬停时显示颜色选项列表

Question

这是我的 table :

<table id="tblData">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
        <th>Country</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Maria Anders</td>
        <td>30</td>
        <td>Germany</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Francisco Chang</td>
        <td>24</td>
        <td>Mexico</td>
    </tr>
</table>

I want to show a list of colors on hover of any of the td's of the table.

List 是一个 div 卡片。像这样:

<div class="hover-div card hidden" id="parent_hover">
    <div class="red-hover container">
        <label>Red</label>
    </div>
    <hr />
    <div class="grey-hover container">
        <label>Grey</label>
    </div>
    <hr />
    <div class="green-hover container">
        <label>Green</label>
    </div>
    <hr />
    <div class="blue-hover container">
        <label>Blue</label>
    </div>
</div>

这是我尝试过的:

$("#tblData tr:has(td)").click(function (e) {
    $("#tblData td").removeClass("highlight");

    var clickedCell = $(e.target).closest("td");
    clickedCell.hover(function () {
        $('.hover-div').removeClass('hidden');
    }, function () {
        $('.hover-div').addClass('hidden');
    });
});

The problem here is that the div is appearing on the selected item on hover but the end of page. I want it to appear where ever the pointer is.

这是 fiddle :https://jsfiddle.net/maverick6912/xpvt214o/957635/

Any help would be really appreciated. Thanks!

Answer 1

添加此代码行:

$("#tblData tr:has(td)").click(function (e) {
  $( '#parent_hover' ).css({'top': e.pageY,'left': e.pageX});
//Other lines...
}

注意:查看完整代码，这里有更多变化。

$(document).ready(function () {
  //making cursor a hand pointer
  $("#tblData tr:has(td)").mouseover(function (e) {
    $(this).css("cursor", "pointer");
  });
  //highlighting cells with chosen color.
  $("#tblData td").click(function (e) {
    $( '#parent_hover' ).css({'top': e.pageY,'left': e.pageX});
    $('.hover-div').addClass('hidden');
    $('.hover-div').removeClass('hidden');
    $(this).removeClass("highlight");
  $("#tblData td").mouseover(function(){
    $('.hover-div').addClass('hidden');
  })
});      
});

#parent_hover {
  visibility:visible!important;
}
.hidden{
  display:none;
}
.hover-div{
  position:absolute;
  z-index:100;
}
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
td,th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
th {
  background-color: #ccd;
}
tr:nth-child(even) {
  background-color: #dddddd;
}
tr:nth-child(odd) {
  background-color: #ddeedd;
}
.highlight {
  background-color: Yellow;
  color: Green;
}
.red {
  background-color: #e53935;
  color: white;
}
.green {
  background-color: #43A047;
  color: white;
}
.grey {
  background-color: #546E7A;
  color: white;
}
.wrapper {
  text-align: center;
}
.button {
  background-color: #1976D2; /* Green */
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
}
.button:hover {
  background-color: #1976D2; /* Green */
  color: white;
}
.button1 {
  background-color: white;
  color: black;
  border: 2px solid #1976D2;
}
.card {
  /* Add shadows to create the "card" effect */
  height: auto;
  width: 60px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  background-color:white;
}
.container {
  padding: 2px 16px;
}
.hidden {
  visibility:hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <table id="tblData">
<tr><th>ID</th><th>Name</th><th>Age</th><th>Country</th></tr>
<tr><td>1</td><td>Maria Anders</td><td>30</td><td>Germany</td></tr>
<tr><td>2</td><td>Francisco Chang</td><td>24</td><td>Mexico</td></tr>
  </table>
  <div class="hover-div card hidden" id="parent_hover">
<div class="red-hover container"><label>Red</label></div>
<hr />
<div class="grey-hover container"><label>Grey</label></div>
<hr />
<div class="green-hover container"><label>Green</label></div>
<hr />
<div class="blue-hover container"><label>Blue</label></div>
</div>