鼠标悬停CSS位置绝对div显示在另一个TD上

Question

我正在使用HTML表格。我的目标很简单。当鼠标悬停打开div时，我正在尝试制作一个菜单。但是在表中的这个工具中。

当我将鼠标悬停在<span>Telephone:</span>元素上时，只要在右侧 <div class="secondary_menu">...</div> 元素（使用z-index）可见的元素<td>下面职位absolute 。

查看JsFiddle

HTML：

<table style="width:100%">
  <tr>
    <td>
      <span>Telephone:<br /><br /><br /><br /><br /></span>
      <div class="secondary_menu">
        <ul>
          <li>My Dashboard</li>
          <li>My Dashboard</li>
          <li>My Dashboard</li>
          <li>My Dashboard</li>
        </ul>
      </div>
    </td>
    <td>555 77 854</td>
  </tr>
</table>

使用CSS，jquery。

Answer 1

您可以使用:hover和兄弟选择器单独在CSS中执行此操作：

table span:hover + .secondary_menu {
    display: block;
}

Updated fiddle

Answer 2

根据您要求的演示

检查以下代码

＆＃13;

＆＃13;

$(".maincontent").hover(function() {
    $('.secondary_menu').addClass(".active");
}, function() {
    $('.secondary_menu').removeClass(".active");
});

＆＃13;

table,
tr td:last-child {
  position: relative;
}
td > div {
  position: absolute;
  opacity: 0;
  transition: opacity 0.5s;
}
tr:hover td > div {
  opacity: 1;
}
tbody tr td:first-child:before {
  content: '';
  display: block;
  background: rgba(0, 0, 0, 0);
  transition: background 0.5s;
}
tbody tr:hover td:first-child:before {
  background: rgba(0, 0, 0, 0.6);
}
td > div > a {
  
  background: #1DE9B6;
  color: #FFF;
  text-decoration: none;
  border-radius: 2px;
  padding: 3px;
  transition: color 0.5s, background 0.5s;
  margin-left : 10px;
}
/*Not important -- example only*/

td > div > a:hover {
  background: #A7FFEB;
  color: #000;
}
table {
  border-collapse: collapse;
  border: solid 1px #EEE;
}
th,
td {
  border: solid 1px #EEE;
  transition: background 0.5s;
}
tr:nth-child(even) {
  background: #E3F2FD;
}

table  tr  td {
  width : 50%;
}

.secondary_menu li{
  width : 300px;
  list-style-type : none;
}

.secondary_menu{
  display : none;
  width : 70px;
}

.maincontent:hover .secondary_menu {
  display : block !important;
  width : 70px;
}

.maincontent{
  padding : 5px;
  cursor: pointer;
}
.active{display : block !important;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="table-responsive">
  <table class="table table-striped table-hover table-bordered" id="sample_editable_1">
  <tbody>
    <tr>
      <td>
        <span class="maincontent">Telephone:
          <ul class="secondary_menu">
          <li>My Dashboard</li>
          <li>My Dashboard</li>
          <li>My Dashboard</li>
          <li>My Dashboard</li>
        </ul></span>
      </td>
      <td>
        <div><a href="#">989898989898</a><a href="#">989898989898</a></div>
      </td>
    </tr>
    <tr>
      <td>
        <span class="maincontent">Telephone:
          <ul class="secondary_menu">
          <li>My Dashboard</li>
          <li>My Dashboard</li>
          <li>My Dashboard</li>
          <li>My Dashboard</li>
        </ul></span>
      </td>
      <td>
        <div><a href="#">989898989898</a><a href="#">989898989898</a></div>
      </td>
    </tr>
  </tbody>
</table>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

当跨度悬停时，您可以使用兄弟选择器更改display的{​​{1}}

secondary_menu

以下是示例http://jsfiddle.net/GchWZ/214/