javascript - 如何更改另一个类的显示？

Question

我有一个我无法弄清楚的问题。

我有两个类:

    <div class="left" style="display:block;"></div>
    <div class="leftlarge" style="display:none">
        <h1>Welcome</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

这就是我想要的:

• .leftlarge onMouseEnter 将 style="display:none"更改为 style="display:block"
• .left onMouseEnter 将 style="display:block" 更改为 style="display:none"

我尝试过使用 css :hover，但这没有用。这样我就无法在该类中显示文本。我还应用了几个在互联网上找到的 javascript，但没有一个能按我想要的方式工作。

感谢任何帮助。

Answer 1

你的意思是这样的，但可能没有闪烁效果？ http://jsfiddle.net/Ce8PW/2/

$(function(){
  $('.left').mouseenter(function(){$('.leftlarge').show();$(this).hide();});
  $('.leftlarge').mouseenter(function(){$('.left').show();$(this).hide();});
});

但是.left div 中必须有东西，至少是 ，否则div 根本不会显示，您将无法附加任何东西。

如果你只是想在 onmouseover 显示/隐藏效果之后，试试这个:http://jsfiddle.net/2ztUp/

如果你想在鼠标悬停时继续显示文本，让 .left div 包裹文本 div，如下所示:http://jsfiddle.net/hKRPY/