在懸停的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

您可以將“ jobSourceID”寬度設置為鼠標懸停時的自動功能。

document.getElementById（jobSourceID）.style.width =“ auto”;

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

在嘗試了所有建議的解決方案之后，我發現它們都無法解決我在郵寄圖中描述的問題。 但是，我進行了更多搜索，在搜索了“ html工具提示”之后，我發現了一些不錯的文章來解釋這一概念，這樣工具提示才是我需要的解決方案。 因此，我設法自己解決了這個問題，使我感到滿意。