0

Image とその上に 2 つの ImageButton を含むテーブルがあります。達成したいのは、マウスが前に述べた Image 上にある場合にのみ、この ImageButton が表示されるようにすることです。

いくつかの解決策を試しましたが、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 を非表示にするだけですが、マウスが画像の上にあるときにそれらを表示することはできません。

編集：

            <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 に答える