0

我有一个包含一个图像和两个图像按钮的表格，我想要实现的是这个图像按钮只有在鼠标悬停在我之前提到的图像上时才可见

我尝试了一些解决方案，但它们似乎只适用于 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
}

4

1 回答 1

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 中）

就是这样。最初图像按钮通过“imb”类隐藏。但是当您将鼠标悬停在图像上时，选择器会使所有同级input type="image"可见。

于 2013-09-30T21:22:47.067 回答