0

我有一个视图，其中有一个用 div 包裹的转发器控件。当用户将鼠标悬停在此 div 上时，我想向下滑动一个按钮。

我将如何使用 jQuery 向下滑动来实现这一点？

谢谢

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js ">   </script>
<script type="text/javascript">
$(document).ready(function () {
    $(".NewsStrip").hover(function () {
        $(".SeeAllEvents").slideDown();
    });
 });
</script>

这是 div 元素，我想将幻灯片应用到：

<div id="SeeAllEvents" class="SeeAllEvents" >
<asp:Image ID="Image1" runat="server" ImageUrl="/_Layouts/VenchursBullet.png"  CssClass="ImagerStyle"/>&nbsp
<asp:HyperLink ID="HyperLink1" runat="server" CssClass="HyperlinkStyle"     NavigateUrl="http://intranet.company.com/Lists/Announcements/AllItems.aspx">See all events</asp:HyperLink>
</div>

这是中继器 div Id 想将 onmouseover/hover 应用于：

<div id="NewsStrip" class="NewsStrip">
<table class="BottomPaddingZero" >
<tr>
   <asp:Repeater ID="repAnnouncements" runat="server">
        <ItemTemplate>
            <td style="vertical-align: top; padding-right:19px; padding-top:1px; padding-left:7px;">
                <asp:HiddenField ID="ItemID" Value='<%#Eval("ID") %>' runat="server" />

                <div class="ImageStyle" >
                <asp:Image ID="imgLink" Height="110px" Width="150px" runat="server"  ImageUrl='<%#Eval("Images")%>' CssClass ="magnify" ToolTip="Click on Image to enlarge.  Click back to minimize." />
                </div>

                <br/><br/>
               <asp:HyperLink ID="hypTextEditLink" runat="server" Text='<%#Eval ("Title")%>' CssClass="TitleStyle" ToolTip="Click to view details of the Announcement." />
            </td>
        </ItemTemplate>
    </asp:Repeater>
 </tr>
 </table><br />
 </div>
4

3 回答 3

2 
$("#yourdiv").hover(
  function () {
    $("#yourbutton").slideDown('slow');
  }, 
  function () {
    $("#yourbutton").slideUp('slow');
  }
);

第一个功能是“鼠标进入”事件。第二个功能是“鼠标离开”事件。更多信息在这里： http ://api.jquery.com/hover/

http://api.jquery.com/slidedown/

http://api.jquery.com/slideup/

于 2012-06-29T12:58:27.190 回答
1 
$("#myDivId").hover(function(){
  $("#myButton").slideDown();
})

http://api.jquery.com/hover/

于 2012-06-29T12:58:42.327 回答
1

不知道你的标记是什么样子的，很难帮助你找出你需要的正确选择器，但最终它应该看起来像这样：

$('.div-class').hover(
    function () { $(this).stop().find('.your-button-class').slideDown(); }, // <- this will be fired on mouseover
    function () { $(this).stop().find('.your-button-class').slideUp(); } // <- this will be fired on mouseout
);

.div-class中继器中 DIV 的 CSS 选择器在哪里，并且.your-button-class是您要向下滑动的按钮的 CSS 选择器。该stop()函数调用将取消 DIV 上当前正在执行的任何动画，这将防止slideDown和/或slideUp调用的任何排队和/或延迟执行。

希望这可以帮助。

于 2012-06-29T13:04:02.100 回答