Question

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

我的网站上有两个div。

当我在div#quickstart上徘徊时，div#visiblepanel应该是可见的;在其他时候，它不应该是。

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

Answer 1

首先，请确保您不 自行关闭您的<script>代码。

应该是：

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

不会

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

然后显示/隐藏：

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

jsfiddle

Answer 2

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

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

http://jsfiddle.net/aNTEA/

Answer 3

或者，不使用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>

Answer 4

继承人...... http://jsfiddle.net/RuFXV/

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：

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

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

Answer 5

使用jQuery及其悬停和css方法

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

悬停div，显示另一个div

5 个答案: