所有正确元素的特殊悬停效果答案

【问题标题】：Special hover effect for all right elements所有正确元素的特殊悬停效果
【发布时间】：2014-09-16 08:51:55
【问题描述】：

如何使所有正确的元素具有特殊的悬停效果 - 工具提示应该出现在左侧而不是右侧。

.wrapper:hover .tooltip {
    opacity: 1;
    pointer-events: auto;
   -webkit-transform: translateY(0px);
      -moz-transform: translateY(0px);
       -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
           transform: translateY(0px);
    z-index:1000;
}

DEMO jsFiddle

【问题讨论】：

标签： hover tooltip unique effect

【解决方案1】：

HTML 标签和 CSS 都发生了很大的变化，所以请看下面的我的 DEMO：

我创建了这个 Pure JS 用于调整 z-index onmouseover 和 onmouseout，放在头部：

function onRoll(cl, cond) {
    if (cond === 1) {
        var element = document.getElementsByClassName(cl);
        for (var i=0; i<element.length; i++) {
            element[i].style.zIndex = '1000';
        }
    } else if (cond === 2) {
        var element = document.getElementsByClassName(cl);
        for (var i=0; i<element.length; i++) {
            element[i].style.zIndex = '10';
        }
    }
}

演示：jsFiddle

【讨论】：

这使工具提示向左滑动，但我只需要正确的元素就可以使工具提示向左滑动（为了响应） PS：投票需要 15 声望，我会尽快 15
好的，感谢信誉积分的解释。我认为没有 JS 就无法做到这一点。我知道如何去做，但想要更好地解释你想要做什么。请参阅我的最新小提琴，了解为什么需要 js。 jsfiddle.net/totallytotallyamazing/6K28y
谢谢，所以我正在研究my website，这用于团队部分 - 所以当浏览器窗口较小时 - 传记将不适合，所以他们应该像here一样放在左边
@VitaliyHayda 感谢您的澄清！我相信应该这样做。请不要忘记在可能的情况下回去帮助我。
是的！太感谢了！这正是我所需要的！