Question

我正在创建带有超链接图像和文本的缩略图，并且鼠标悬停div内容应该显示，到目前为止鼠标悬停工作正常，因为我不擅长CSS。我无法使用span获取图像下方的文本。另请参阅www.ge.com在页面右侧的“查看更多故事”下的参考资料，我想在我的网站上复制它，请帮忙。

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

Answer 1

你的意思是这样吗???

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

Answer 2

您可以将链接放在每个隐藏的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>

使用span标记不起作用的CSS超链接，文本在图像下方

2 个答案: