Question

我有一个包含Image和两个ImageButtons的表，我想要实现的是这个ImageButtons只有当鼠标位于我之前提到的Image上时才可见

我尝试了一些解决方案，但它们似乎只适用于WinForms。

编辑：

  using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.UI;
  using AjaxControlToolkit;
  using System.Web.UI.WebControls;

  namespace Slider.Web
  {
   public partial class Slider_Web : System.Web.UI.Page
   {
    protected void Page_Load(object sender, EventArgs e)
    {
        ImageButton1.Visible = false;
        ImageButton2.Visible = false;
    }

    [System.Web.Services.WebMethod]
    [System.Web.Script.Services.ScriptMethod]
    public static AjaxControlToolkit.Slide[] GetSlides()
    {
        return new AjaxControlToolkit.Slide[] { 
            new AjaxControlToolkit.Slide("bytes.aspx?FileName=grua.jpg", "title", "tecnologia", "http://www.qwe.com"),
            new AjaxControlToolkit.Slide("bytes.aspx?FileName=aluminio.jpg", "title", "tecnologia", "http://www.qwe.com"),
        };
    }

    private void Image1_MouseHover(object sender, EventArgs e)
    {
        this.ImageButton1.Visible = true;
        this.ImageButton2.Visible = true;
    }

    private void Image1_MouseLeave(object sender, EventArgs e)
    {
        this.ImageButton1.Visible = false;
        this.ImageButton2.Visible = false;
    }
}
}

只是让ImageButtons不可见，但当鼠标悬停在Image上时，我无法看到它们。

编辑：

            <table style="width:980px; background-color: #e2f1f8; position: relative; left: 7px;">
            <tr>
                <td class="auto-style1">

                    <div aria-level="0" style="position: relative; top: 0px; left: 0px;">
                        <div aria-level="1" style="position: absolute; z-index: inherit; left: 0px; top: 125px;">
                            <asp:ImageButton CssClass="imb" ID="ImageButton1" runat="server" Height="100px" ImageUrl="bytes.aspx?FileName=flecha_izq.png" Width="120px" BackColor="Transparent" ImageAlign="Right" style="margin-right: 0px" />
                        </div>


                    <asp:Image CssClass="img" ID="Image1" runat="server" Height="350px" Width="980px" ImageAlign="Middle" BackColor="#E2F1F8" />
                    <asp:SlideShowExtender ID="Image1_SlideShowExtender" runat="server" AutoPlay="True" Enabled="True" ImageDescriptionLabelID="Label1" Loop="True" NextButtonID="ImageButton2" PlayInterval="4000" PreviousButtonID="ImageButton1" SlideShowServiceMethod="GetSlides" SlideShowServicePath="" TargetControlID="Image1" UseContextKey="True"></asp:SlideShowExtender>
                        <div aria-level="1" style="position: absolute; z-index: inherit; right: 0px; top: 125px;">
                            <asp:ImageButton CssClass="imb" ID="ImageButton2" runat="server" ImageUrl="bytes.aspx?FileName=flecha_derecha.png" Width="120px" BackColor="Transparent" Height="100px" ImageAlign="Left" />
                        </div>
                    </div>
                    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
                    </asp:ToolkitScriptManager>
                </td>
            </tr>
            <tr>
                <td class="auto-style1">
                    <asp:Label ID="Label1" runat="server" Text="Label" Font-Names="Arial Rounded MT Bold"></asp:Label>
                </td>
            </tr>
            </table>

那些是我的ASP标签，CSS代码在我的HTML代码的HEAD上

    <style type="text/css" >
.imb {
     visibility: hidden
}

 .img:hover ~ input[type="image"] {
     visibility:visible
}

Answer 1

不要在服务器端代码中执行此操作。事实上，根本不在代码中执行此操作，这可以完全用CSS样式完成。

让我们说你的按钮（以及你需要悬停的图像）是这样定义的

<asp:Image ID="Image1" runat="server" ImageUrl="img0.gif"/>

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="img1.gif" />
<asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="img2.gif" />

将CSS类添加到他们的标记中，如下所示

<asp:Image CssClass="img" ID="Image1" runat="server" ImageUrl="img0.gif"/>

<asp:ImageButton CssClass="imb" ID="ImageButton1" runat="server" ImageUrl="img1.gif" />
<asp:ImageButton CssClass="imb" ID="ImageButton2" runat="server" ImageUrl="img2.gif" />

将类定义为

<style type="text/css" >
   .imb {
         visibility: hidden
    }

     .img:hover ~ input[type="image"] {
         visibility:visible
    }
</style>

（您可以将此定义放在单独的样式表或页面HEAD中）

那就是它。最初，图像按钮隐藏在＆＃34; imb＆＃34;类。但是当您将鼠标悬停在图片上时，选择器会使{em>所有同级 input type="image"可见。

当鼠标悬停在ASP.NET上的图像时，修改两个ImageButton的可见性

1 个答案: