Question

这是我的style.css（来自jssfiddle）

#comments {
  background: #fff
}

iframe {
  width: 100%;
  height: 1200px;
  border: 0;
}

#comment-wrap {
  background: #fff;
  position: relative
}

#comments #comment-wrap {
  display: none;
  z-index: 5;
  padding: 10px
}

#comments:hover #comment-wrap {
  display: block
}

这是我的jquery.js（来自jsfiddle）

hover = function() {
  if (!document.body.currentStyle) return;
  var DIVcomments = document.getElementById('comments');
  var DIVcomment_wrap = document.getElementById('comment-wrap');
  DIVcomments.onmouseover = function() {
    DIVcomment_wrap.style.display = 'block';
  }
  DIVcomments.onmouseout = function() {
    DIVcomment_wrap.style.display = 'none';
  }
}
window.onload = hover;

这是从文本文件制作的html。最后一列宽度是1280px，尽管我要求它仅用于iframe。当我将鼠标悬停在维基百科文本上时，显示在列中，使其非常烦人，无法将鼠标悬停在下一条记录上。我在线搜索和堆栈溢出，但找不到我的td标签的有效设置。任何指针都可以在列外显示？

<link rel="stylesheet" href="style.css">
<script src="jquery.js"></script>

<html>
<style type=text/css>
            table, th, td {
            border: 1px solid black;
            }
            </style>
   <body>
<table>
<th>HEADING1</th>
<th>HEADING2</th>
<th>HEADING3</th>
<th>HEADING4</th>
<tr>
<td>sam</td>
<td> newyork</td>
<td> 1345B</td>
<td style="width: 1280px"> <div id="comments"> <a href="#"     class="btn">Wikipedia</a> <div id="comment-wrap"> <iframe     src="http://wikipedia.com" width="1280" height="720"></iframe> </div>     </div></td>
</tr>
<tr>
<td>msnam</td>
<td> newsdfyork</td>
<td> 1345B</td>
<td> 783473</td>
</tr>
<tr>
<td>sadfm</td>
<td> newysdfork</td>
<td> 1345B</td>
<td> 7sdf83473</td>
</tr>
<tr>
<td>sam</td>
<td> newysdfork</td>
<td> 1345B</td>
<td> 783sdf473</td>
</tr>
<tr>
<td>sasdfm</td>
<td> newysdfork</td>
<td> 1345B</td>
<td> 7834sdf73</td>
</tr>
</table>
   </body>
</html>

Answer 1

也许你想要“飞行”iframe

var DIVcomments = document.getElementById('comments');
var DIVcomment_wrap = document.getElementById('comment-wrap');
DIVcomments.addEventListener('mouseover', function() {
  var pos = DIVcomments.getBoundingClientRect();
  DIVcomment_wrap.style.top = pos.top + "px";
  DIVcomment_wrap.style.left = (pos.left + 70) + "px";
  DIVcomment_wrap.getElementsByTagName('iframe')[0].style.width = (document.body.offsetWidth - pos.left - 90) + "px";
  DIVcomment_wrap.style.display = 'block';
});

DIVcomments.addEventListener('mouseout', function() {
  DIVcomment_wrap.style.display = 'none';
});

#comments {
  background: #fff
}

iframe {
  width: 100%;
  height: 1200px;
  border: 0;
}

#comment-wrap {
  background: #fff;
  position: relative
}

#comments #comment-wrap {
  display: none;
  z-index: 5;
  padding: 10px;
  position: absolute;
}

#comments:hover #comment-wrap {
  display: block
}

table,
th,
td {
  border: 1px solid black;
}

iframe {
  border: 1px solid #ccc;
}

<table>
  <th>HEADING1</th>
  <th>HEADING2</th>
  <th>HEADING3</th>
  <th>HEADING4</th>
  <tr>
    <td>sam</td>
    <td> newyork</td>
    <td> 1345B</td>
    <td style="width: 1280px">
      <div id="comments"> <a href="#" class="btn">Wikipedia</a>
        <div id="comment-wrap">
          <iframe src="https://www.wikipedia.org/" width="1280" height="720"></iframe>
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <td>msnam</td>
    <td> newsdfyork</td>
    <td> 1345B</td>
    <td> 783473</td>
  </tr>
  <tr>
    <td>sadfm</td>
    <td> newysdfork</td>
    <td> 1345B</td>
    <td> 7sdf83473</td>
  </tr>
  <tr>
    <td>sam</td>
    <td> newysdfork</td>
    <td> 1345B</td>
    <td> 783sdf473</td>
  </tr>
  <tr>
    <td>sasdfm</td>
    <td> newysdfork</td>
    <td> 1345B</td>
    <td> 7834sdf73</td>
  </tr>
</table>

HTML：td-iframe进入表格内部。可以在空白区域外显示吗？

1 个答案: