javascript - js 多个悬停框在同一个框中响应

Question

我有一个页面，其中包含 35 个以上的灰色小框，提供不同的主题。当您将鼠标悬停在它们上方时，我希望每个主题的简短描述显示在一个较大的黄色框中。

我已经将 html 缩小到只有两个框并且有一个 http://jsfiddle.net/x4q381L5/

我的目标是在页面上显示一个黄色框并带有保留文本。当您将鼠标悬停在灰色的“excel 提示”框上时，黄色框将显示“提示”。当您将鼠标悬停在“aps”上时，相同的黄色框将显示“access”等 35 个以上的框。

我可以看到我每次都在调用另一个“toolkithelpbox”，但在我的脑海中我需要创建 35 个不同的类或 ID 才能完成这项工作，也许有更好的方法。

(注意，在 css 中，我确实将单元格作为表格的跨度，但我缺乏 js 知识导致我进行了简化，这就是我要做的)

谢谢，克里斯

html

<div class='tabletoolkit'>
    <span class='row'>
        <span id='toolkitcell'>Excel Tips</span>
        <p id='toolkithelpbox'>tips</p>

        <span id='toolkitcell'>APS</span>
        <p id='toolkithelpbox'>access</p>
    </span>
</div>

CSS

.tabletoolkit
{
display:table;
border-spacing:10px;
border-collapse:separate;
text-align:center;
}

.tabletoolkit span.row a
{
display:table-row;
float:left;
text-decoration:none;
}

#toolkithelpbox
{
display:table-cell;
height:210px;
width:360px;
vertical-align:middle;
padding:5px;
background-color:yellow;
}

#toolkitcell
{
display:table-cell;
height:90px;
width:100px;
padding:5px;
vertical-align:middle;
background-color:gainsboro;
color:black;
}

#toolkitcell:hover
{
background-color:red;
color:white;
}

js

var oVTog = {
toggle: function (el) {
        oVTog.container = el.parentNode;
        oVTog.para = oVTog.container.getElementsByTagName('p')[0];  
        oVTog.para.style.display = "none";

        el.onmouseover = function () {
                      oVTog.para.style.display = '';
                      return false;
                };
        el.onmouseout = function () {
                      oVTog.para.style.display = 'none';
                      return false;
                };
        el.onclick = function () {
                      oVTog.para.style.display = oVTog.para.style.display == 'none' ? '' : 'none';
                      return false;
                };
        }
};
window.onload = function () {
    var l = document.getElementById('toolkitcell');
    oVTog.toggle(l); 
};

Answer 1

如果我没猜错，您可以使用纯 CSS 和下一个同级选择器 - link .

简单地隐藏 CSS 中的所有黄色框并将下一个显示为悬停的灰色框:

.toolkithelpbox { visibility: hidden; }
.toolkitcell:hover + .toolkithelpbox { visibility: visible; }

JSFiddle

附言将 ID 更改为类，因为 ID 必须是唯一的并且只能使用一次。

--

更新:因此，如果您只想拥有一个黄色框并更改其中的内容，这在纯 CSS 中仍然不是什么大问题 :) 请参阅 DEMO on JSFiddle .

在此解决方案中，创建了向右浮动的 .placeholder 黄色框，以保留悬停提示区域。 HTML 结构几乎相同，但在这种情况下，我们绝对定位 .toolkithelpbox 以显示在黄色框上方。我们仍然使用 next sibling 选择器在灰色框上显示提示 :hover:

.toolkithelpbox { display: none; }
.toolkitcell:hover + .toolkithelpbox { display: table; }

注意:我不得不从 .tabletoolkit 中删除 display: table; 因为 FireFox 不尊重 position: relative; 在表元素上。我需要在所有框内添加额外的跨度以使 vertical-align: middle; 成为可能。如果灰色框中的文本总是只有一行，那么您可以通过将行高设置为框高来删除内部 span 和垂直居中文本 - line-height: 90px;.