Javascript 鼠标上隐藏按钮在图像上覆盖

Javascript 鼠标上隐藏按钮在图像上覆盖,javascript,jquery,asp.net,.net,Javascript,Jquery,Asp.net,.net,我有以下代码: <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"> <script src="Js/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("

我有以下代码:

  <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

<script src="Js/jquery.min.js"></script>

<script type="text/javascript">
        $(document).ready(function () {
            $("#propertyimage").mouseover(function () {

                $("#lnkedit").hide();
            });
            $("#propertyimage").mouseout(function () {
                $("#lnkedit").show();
            });

        });
    </script>


<div class="ddldemo">
  <asp:Repeater ID="rptproperty" runat="server">
   <ItemTemplate>
      <div style="width: 165px;">
          <asp:Image ID="propertyimage" runat="server" ImageUrl='<%#Eval("image1") %>'" />
          <asp:LinkButton runat="server" ID="lnkedit" Text="Edit"></asp:LinkButton>
       </div>
   </ItemTemplate>
   </asp:Repeater>
 </div>
 </asp:Content>

$(文档).ready(函数(){
$(“#属性图像”).mouseover(函数(){
$(“#lnkedit”).hide();
});
$(“#属性图像”).mouseout(函数(){
$(“#lnkedit”).show();
});
});

问题是您的元素没有ID。代码中的ID属性是服务器端ASP.NET ID,而不是HTML ID属性。对于客户端ID,请使用
ClientID

<asp:Image ID="propertyimage" ClientID="propertyimage" runat="server" ImageUrl='<%#Eval("image1") %>'" />

小心点,我对ASP了解不多,但我看到了“模板”和“转发器”?因此,您似乎有机会创建具有相同ID的多个输入

试试这个:

<script src="Js/jquery.min.js"></script>

<script type="text/javascript">
        $(document).ready(function () {
            $("#propertyimage").mouseover(function () {

                $(this).next().hide();
            });
            $("#propertyimage").mouseout(function () {
                $(this).next().show();
            });

        });
    </script>


<div class="ddldemo">
  <asp:Repeater ID="rptproperty" runat="server">
   <ItemTemplate>
      <div style="width: 165px;">
          <asp:Image class="propertyimage" runat="server" ImageUrl='<%#Eval("image1") %>'" />
          <asp:LinkButton runat="server" class="lnkedit" Text="Edit"></asp:LinkButton>
       </div>
   </ItemTemplate>
   </asp:Repeater>
 </div>

$(文档).ready(函数(){
$(“#属性图像”).mouseover(函数(){
$(this.next().hide();
});
$(“#属性图像”).mouseout(函数(){
$(this.next().show();
});
});

如果ItemTemplate中有控件,则无法执行此操作。控件的唯一客户端id不会是#propertyimage。这不可能,因为您可能有多个具有相同按钮名称的用户控件。ASP.Net将生成与控件树相关的唯一id。在这种情况下,获取clientid将不起作用,因为您在一个repeater控件中,并且不能有多个具有相同客户端id的控件

不过,您可以通过类来实现这一点。这是一个例子。它使用一个类来标识转发器,然后使用jquery next()方法选择下一个锚元素并显示/隐藏它。尝试这样修改您的代码:

<script src="Js/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".propertyImage").mouseover(function () {

            $(this).next("a").hide();
        });
        $(".propertyImage").mouseout(function () {
            $(this).next("a").show();
        });

    });
</script>
<div class="ddldemo">
<asp:Repeater ID="rptproperty" runat="server">
<ItemTemplate>
  <div style="width: 165px;">
      <asp:Image ID="propertyimage" class="propertyImage" runat="server" ImageUrl='<%#Eval("image1") %>'" />
      <asp:LinkButton runat="server" ID="lnkedit" Text="Edit"></asp:LinkButton>
   </div>
</ItemTemplate>
</asp:Repeater>
</div>

$(文档).ready(函数(){
$(“.propertyImage”).mouseover(函数(){
$(this.next(“a”).hide();
});
$(“.propertyImage”).mouseout(函数(){
$(this.next(“a”).show();
});
});

这不会创建多个具有相同ID值的元素吗?如果中继器数据源有多个项是-请参阅我关于类备选方案的说明。谢谢您的时间。。。但它不起作用…:-(显示ASP生成的HTML怎么样。
<script src="Js/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".propertyImage").mouseover(function () {

            $(this).next("a").hide();
        });
        $(".propertyImage").mouseout(function () {
            $(this).next("a").show();
        });

    });
</script>
<div class="ddldemo">
<asp:Repeater ID="rptproperty" runat="server">
<ItemTemplate>
  <div style="width: 165px;">
      <asp:Image ID="propertyimage" class="propertyImage" runat="server" ImageUrl='<%#Eval("image1") %>'" />
      <asp:LinkButton runat="server" ID="lnkedit" Text="Edit"></asp:LinkButton>
   </div>
</ItemTemplate>
</asp:Repeater>
</div>