在悬停时在DIV中显示隐藏文本

Question

当用户将鼠标光标悬停在文本上时，所需的效果是使表格单元格中的隐藏文本显示单元格中的全文。请参阅问题图表链接以了解我的意思。 “解决方案”表示期望的效果，而“问题”表示代码当前正在做什么。非常感谢您的帮助。

var jobSourceID = 'jobSource' + jobIndex;
jobSource.innerHTML = '<div id="' + jobSourceID + '">' + jobSourceValue + '</div>';
document.getElementById(jobSourceID).style.marginLeft = '3px';
document.getElementById(jobSourceID).style.maxWidth = '55px';
document.getElementById(jobSourceID).style.overflow = 'hidden';
document.getElementById(jobSourceID).style.textOverflow = 'ellipsis';
document.getElementById(jobSourceID).style.whiteSpace = 'nowrap';
document.getElementById(jobSourceID).addEventListener('mouseover', function () {
    document.getElementById(jobSourceID).style.overflow = 'visible';
    document.getElementById(jobSourceID).style.backgroundColor = '#555555';
});
document.getElementById(jobSourceID).addEventListener('mouseout', function () {
    document.getElementById(jobSourceID).style.overflow = 'hidden';
    document.getElementById(jobSourceID).style.backgroundColor = '';
});

Answer 1

你可以这样做：

*{
  padding:0;
  margin: 0;
}

td{
  
  overflow:hidden;
}

td div{
  background-color: #ccc;
  width:50px;
}

td:hover{
  overflow: inherit
}

td:hover div{
  width:100%;
}

<table>
  <tr>
    <td>
      <div>
        asadgshfdadgfhgdgjgsfgfadsfahgdafgerre
      </div>
    </td>
  </tr>
</table>

Answer 2

您可以设置＆＃39; jobSourceID＆＃39;鼠标悬停功能的宽度为自动。

document.getElementById（jobSourceID）.style.width =＆＃34; auto＆＃34;;

Answer 3

如果您的问题只是背景的样式，您可以在DIV中设置SPAN样式并隐藏它而不是仅隐藏文本。

document.body.innerHTML = '<div id="' + jobSourceID + '"><span>' + jobSourceValue + '<span></div>';
document.getElementById(jobSourceID).style.marginLeft = '3px';
document.getElementById(jobSourceID).style.maxWidth = '55px';
document.getElementById(jobSourceID).style.overflow = 'hidden';
document.getElementById(jobSourceID).style.textOverflow = 'ellipsis';
document.getElementById(jobSourceID).style.whiteSpace = 'nowrap';
document.getElementById(jobSourceID).addEventListener('mouseover', function () {
    document.getElementById(jobSourceID).style.overflow = 'visible';
    document.getElementById(jobSourceID).children[0].style.backgroundColor = '#555555';
});
document.getElementById(jobSourceID).addEventListener('mouseout', function () {
    document.getElementById(jobSourceID).style.overflow = 'hidden';
    document.getElementById(jobSourceID).children[0].style.backgroundColor = '';
});

Answer 4

在尝试发布所有建议的解决方案之后，我发现它们都没有解决我在帖子图中描述的问题。但是，我做了一些搜索和谷歌搜索＆＃34; html工具提示＆＃34;我找到了一些很好的文章来解释这个概念，以便工具提示是我需要的解决方案。所以我设法自己解决了这个问题让我满意。