Question

我想要在悬停时切换四列。

每列都有默认内容（页面加载时可见）以及仅在鼠标悬停在列上时显示的内容。

我希望悬停内容以平滑的切换效果显示（向下滑动）

为了确保我们走上正轨，我不需要知道如何做到这一点。我知道如何，我需要知道的是“最好”的方法。

Answer 1

您必须使用“onmouseover”和“onmouseout”活动。

JavaScript的：

document.getElementById('IDOfTheElement').onmouseover = function() {
    // Whatever your hover code goes here
    document.getElementById('IDOfElementYouWantToShow').style.display = "block";
});

document.getElementById('IDOfTheElement').onmouseout = function() {
    // Exit hover code goes here
    document.getElementById('IDOfElementYouWantToHide').style.display = "none";
});

jQuery有一个很好的方法来解决这个问题：

$('#IDOfTheElement').on('mouseover', function() {
    // Whatever your hover code goes here
    $('#IDOfElementYouWantToShow').show();
    // Or you can
    $('#IDOfElementYouWantToShow').fadeIn("slow", function() {
        alert('Fading in!');
    });
});

$('#IDOfTheElement').on('mouseout', function() {
    // Exit hover code goes here
    $('#IDOfElementYouWantToHide').hide();
    // Or you can
    $('#IDOfElementYouWantToShow').fadeOut("slow", function() {
        alert('Fading out!');
    });
});

请注意，某些浏览器可能存在show（）和hide（）问题，因此您可能需要使用document.getElementById('ID').style.display = 'block';或document.getElementById('ID').style.display = 'none';。

Answer 2

根据您为问题选择的标记，以下是一个很好的解决方案，olny需要 JQuery （不涉及 CSS ）。使用hover()和toggle()函数实际上非常简单。

$('tbody.restricted').hide();

$('table').hover(function() {
    $(this).find('tbody.restricted').slideToggle("slow");
});

您的意愿引入了一个更复杂的挑战，可以将多个行设置为块。我认为适用于此目的的解决方案是封装（动态或不动态）要在tbody内整体设置动画的行，这些行将显示为带有 CSS的block

tbody { display:block; }

N.B.I之所以这样，是因为使用了一个表（提到了列），但你总是可以设计这个解决方案而不使用表格，只显示标记为块（默认为div）。这不需要先前的 CSS 更改。

查看此功能完全正常 JSFiddle

Answer 3

不想只复制其他一些代码，我认为这个jsfiddle链接可以很好地解决你的问题。

http://jsfiddle.net/NKC2j/2/

$("#menu").hover(function(){
    $('.flyout').slideToggle();
});

对于性能，您需要切换CSS类，否则您需要遍历DOM几次以显示/隐藏元素

这是原帖：https://stackoverflow.com/a/11114735/1231079

在列上进行切换效果的最佳方法

3 个答案: