修改兩個ImageButton的可見性，當鼠標懸停在ASP.NET上的圖像

Question

我有一個表，其中包含一個圖像和兩個ImageButtons在它上面，我想實現的是，這個ImageButtons只有當鼠標在圖像I之前提到

我試過一些解決方案，但他們似乎只能在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 
} 

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

就是這樣。最初圖像按鈕通過「imb」類隱藏。但是當您將鼠標懸停在圖片上時，選擇器會使所有兄弟的input type="image"可見。