Main
<!DOCTYPE html>
<html>
<head>
<title>詳細メニュー</title>
</head>
<body>
<table border="1" style="border-collapse: collapse;">
<tr>
<td onmouseover="showDetails('details1')" onmouseout="hideDetails('details1')">MENU</td>
<td onmouseover="showDetails('details2')" onmouseout="hideDetails('details2')">メール受信</td>
<td onmouseover="showDetails('details3')" onmouseout="hideDetails('details3')">メール送信</td>
<td onmouseover="showDetails('details4')" onmouseout="hideDetails('details4')">メール削除</td>
</tr>
<tr>
<td id="details1" onmouseover="showDetails('details1')" onmouseout="hideDetails('details1')" style="visibility: hidden;">
</td>
<td id="details2" onmouseover="showDetails('details2')" onmouseout="hideDetails('details2')" style="visibility: hidden;">
<p onclick="showStr('str1')">・メニューを表示</p>
<p onclick="hideStr('str1')">・メニューを削除</p>
</td>
<td id="details3" onmouseover="showDetails('details3')" onmouseout="hideDetails('details3')" style="visibility: hidden;">
<p onclick="showStr('str2')">・メニューを表示</p>
<p onclick="hideStr('str2')">・メニューを削除</p>
</td>
<td id="details4" onmouseover="showDetails('details4')" onmouseout="hideDetails('details4')" style="visibility: hidden;">
<p onclick="showStr('str3')">・メニューを表示</p>
<p onclick="hideStr('str3')">・メニューを削除</p>
</td>
</tr>
<tr>
<td style="visibility: hidden;">
</td>
<td id="str1" style="visibility: hidden;">
受信
</td>
<td id="str2" style="visibility: hidden;">
送信
</td>
<td id="str3" style="visibility: hidden;">
削除
</td>
</tr>
</table>
<script>
function showDetails(elementId) {
const details = document.getElementById(elementId);
details.style.visibility = "visible"; // カーソルが1行目に重なったときに2行目を表示
}
function hideDetails(elementId) {
const details = document.getElementById(elementId);
details.style.visibility = "hidden"; // カーソルが1行目から外れたときに2行目を非表示
}
function showStr(elementId) {
const con = document.getElementById(elementId);
con.style.visibility = "visible";
}
function hideStr(elementId) {
const con = document.getElementById(elementId);
con.style.visibility = "hidden";
}
</script>
</body>
</html>