javascript 悬停div，显示其他div

Hover div, show other div

提问by dmrc1143

<div id="quickstart">
    <asp:HyperLink ID="hlHemenBasla" runat="server">Deneyim Payla?</asp:HyperLink>        
</div>
<div id="visiblepanel" class="visiblepanel"></div>

I have two divs on my website.

div我的网站上有两个。

While I am hovering on div#quickstart, div#visiblepanelshould be visible; at other times, it should not be.

当我悬停在 时div#quickstart，div#visiblepanel应该是可见的；在其他时候，它不应该是。

I found some code on the internet, but I "couldn't run none".

我在互联网上找到了一些代码，但我“无法运行任何代码”。

回答by Gabe

First, make sure you're NOTself closingyour <script>tags.

首先，确保你不要自我封闭你的<script>标签。

It should be:

它应该是：

<script type="text/javascript" src="Scripts/jquery-1.6.2.js"></script>

NOT

不是

<script type="text/javascript" src="Scripts/jquery-1.6.2.js"/>

Thento show/hide:

然后显示/隐藏：

$('#quickstart').hover(function() {
    $('#visiblepanel').toggle();
});

jsfiddle

提琴手

回答by thirtydot

If there are no other elements between #quickstartand #visiblepanel, you can do it like this with just CSS:

如果#quickstart和之间没有其他元素#visiblepanel，您可以仅使用 CSS 这样做：

#visiblepanel {
    display: none
}
#quickstart:hover + #visiblepanel {
    display: block
}

http://jsfiddle.net/aNTEA/

http://jsfiddle.net/aNTEA/

回答by Joonas

Heres something.. http://jsfiddle.net/RuFXV/

继承人的东西.. http://jsfiddle.net/RuFXV/

HTML:

HTML：

<div id="hoverThis">
    <span>This is just chilling here...</span>
    <p>...and this is shown when you hover over #hoverThis div</p>
</div>

CSS:

CSS：

#hoverThis {
    float: left;
    border: 1px solid #e1e1e1;
    padding: 10px;
}

#hoverThis p { display: none; }
#hoverThis:hover p { display: block; }

回答by Erty Seidohl

Or, not using jquery:

或者，不使用 jquery：

<div id="quickstart" onmouseover="document.getElementById('visiblepanel').style.display='block'" onmouseout="document.getElementById('visiblePanel').style.display='none'">
    <asp:HyperLink ID="hlHemenBasla" runat="server">Deneyim Payla?</asp:HyperLink>  
</div>
<div id="visiblepanel" class="visiblepanel"></div>

回答by jsoverson

Use jQueryand its hover and css methods

使用jQuery及其悬停和 css 方法

$('#quickstart').hover(
  function(){$('#visiblepanel').css('visibility','visible')},
  function(){$('#visiblepanel').css('visibility','hidden')}
);