CSS超鏈接文本下面的圖像使用跨度標記不工作

-1

我超鏈接圖像和文本下創建縮略圖和mousehover div內容應該顯示，到目前爲止mousehover工作正常，因爲我不擅長CSS。我無法使用span獲取圖像下面的文本。另請參閱www.ge.com上的參考資料，在頁面右側的「查看更多故事」下，我想將其複製到我的網站上，請幫助。CSS超鏈接文本下面的圖像使用跨度標記不工作

   <a href="" class="nav-holder-link"> 
       <img width="67" height="51" class="nav-header-image" src="images/img1.jpg" alt="" /> 
       <span class="nav-holder-text">moving</span> 
       <div class="nav-holder-preview"> 
        <img width="305" height="100" src="images/img1.jpg" alt="" /> 
        <p style="position:absolute;top:55px;padding-left:10px;padding-right:10px">Powered by GE locomotives, the Juice Train is bringing Orange Juice to your breakfast table in one of the most efficient ways possible.</p> 
       </div> 
       </a> 

       <a href="" class="nav-holder-link"> 
       <img width="67" height="51" class="nav-header-image" src="images/img2.jpg" alt=""/> 
       <span class="nav-holder-text">Watch</span> 
       <div class="nav-holder-preview"> 
        <img width="305" height="100" src="images/img2.jpg" alt="" /> 
        <p style="position:absolute;top:55px;padding-left:10px;padding-right:10px">Watch this time lapse as the Tropicana/CSX Juice Train, powered by two 4,400 HP GE </p> 
       </div> 
       </a>

來源

2013-01-06 ravi shiggavi

塊級元素，如內聯元素內DIV如錨標記是格式不正確的HTML。內聯元素應該只包含內聯元素。 – Scott

你的意思是這樣的嗎???

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<script type="text/vbscript"> 
' <!-- 
Function ToggleInformationOn(Id) 
    if Id = 1 then 
     ToggleInformationOff() 
     window.document.getElementById("info4image1").style.display = "block" 
    elseif Id = 2 then 
     ToggleInformationOff() 
     window.document.getElementById("info4image2").style.display = "block" 
    elseif Id = 3 then 
     ToggleInformationOff() 
     window.document.getElementById("info4image3").style.display = "block" 
    elseif Id = 4 then 
     ToggleInformationOff() 
     window.document.getElementById("info4image4").style.display = "block" 
    end if 
End Function 

Function ToggleInformationOff() 
    window.document.getElementById("info4image1").style.display = "none" 
    window.document.getElementById("info4image2").style.display = "none" 
    window.document.getElementById("info4image3").style.display = "none" 
    window.document.getElementById("info4image4").style.display = "none" 
End Function 
' --> 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
    <div style="width: 305px;"> 
     <div style="width: 25%; float: left;"> 
      <img width="67" height="51" class="nav-header-image" src="images/img1.jpg" alt="" onmouseover="ToggleInformationOn(1)" onmouseout="ToggleInformationOff()" /><br /> 
      <span class="nav-holder-text" onmouseover="ToggleInformationOn(1)" onmouseout="ToggleInformationOff()">moving</span> 
     </div> 
     <div style="width: 25%; float: left;"> 
      <img width="67" height="51" class="nav-header-image" src="images/img2.jpg" alt="" onmouseover="ToggleInformationOn(2)" onmouseout="ToggleInformationOff()" /><br /> 
      <span class="nav-holder-text" onmouseover="ToggleInformationOn(1)" onmouseout="ToggleInformationOff()">Watch</span> 
     </div> 
     <div style="width: 25%; float: left;"> 
      <img width="67" height="51" class="nav-header-image" src="images/img1.jpg" alt="" onmouseover="ToggleInformationOn(3)" onmouseout="ToggleInformationOff()" /><br /> 
      <span class="nav-holder-text" onmouseover="ToggleInformationOn(1)" onmouseout="ToggleInformationOff()">Charley</span> 
     </div> 
     <div style="width: 25%; float: left;"> 
      <img width="67" height="51" class="nav-header-image" src="images/img2.jpg" alt="" onmouseover="ToggleInformationOn(4)" onmouseout="ToggleInformationOff()" /><br /> 
      <span class="nav-holder-text" onmouseover="ToggleInformationOn(1)" onmouseout="ToggleInformationOff()">Football</span> 
     </div> 
    </div> 
    <div id="info4image1" class="nav-holder-preview" style="position: absolute; width: 305px; top: 75px; padding-left: 10px; padding-right: 10px; display: none;"> 
     <img width="305" height="100" src="images/img1.jpg" alt="" /> 
     <p style="width: 305px">Powered by GE locomotives, the Juice Train is bringing Orange Juice to your breakfast table in one of the most efficient ways possible.</p> 
    </div> 
    <div id="info4image2" class="nav-holder-preview" style="position: absolute; width: 305px; top: 75px; padding-left: 10px; padding-right: 10px; display: none;"> 
     <img width="305" height="100" src="images/img2.jpg" alt="" /> 
     <p style="width: 305px">Watch this time lapse as the Tropicana/CSX Juice Train, powered by two 4,400 HP GE </p> 
    </div> 
    <div id="info4image3" class="nav-holder-preview" style="position: absolute; width: 305px; top: 75px; padding-left: 10px; padding-right: 10px; display: none;"> 
     <img width="305" height="100" src="images/img1.jpg" alt="" /> 
     <p style="width: 305px">Powered by willy wonka's choclate factory, blah blah blah.</p> 
    </div> 
    <div id="info4image4" class="nav-holder-preview" style="position: absolute; width: 305px; top: 75px; padding-left: 10px; padding-right: 10px; display: none;"> 
     <img width="305" height="100" src="images/img2.jpg" alt="" /> 
     <p style="width: 305px">Watch manchester united play football then have a beer and think about how nice life is when you support a superb football team</p> 
    </div> 
</div> 
</form> 
</body> 
</html>

來源

2013-01-06 04:03:47 Zeddy

感謝您的答覆，但我希望超鏈接圖像和文本下面和水平對齊，其中隱藏div在它應該顯示鼠標懸停部分我已經完成，但我不能讓圖像下面的圖像並水平對齊 –

你可以把裏面的每個隱藏的div的你的鏈接... 東西線沿線的...

<div style="width: 25%; float: left;"> 
    <a hef="link-to-somepage.aspx"> 
    <img width="67" height="51" class="nav-header-image" src="images/img2.jpg" alt="" onmouseover="ToggleInformationOn(4)" onmouseout="ToggleInformationOff()" /><br /> 
     <span class="nav-holder-text" onmouseover="ToggleInformationOn(1)" onmouseout="ToggleInformationOff()">Football</span> 
    </a> 
</div>

來源

2013-01-06 12:40:58 Zeddy

CSS超鏈接文本下面的圖像使用跨度標記不工作

回答

相關問題