将div写入a标签-优快云博客

一。把div寫到a標籤下面

代碼如下：

View Code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="BehanceLog.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
    .menu{ display:block; width:200px; height:100px; background-color:Red; margin:20px auto;}
    .showdiv{ display:none;}
    .menu a{ display:block; background-color:Red; position:relative; width:100px; height:20px;}

    .menu a:hover  .showdiv
    {
        background-color:Yellow;
        display:block;
        position:absolute; z-index:200;
        width:300px; height:200px;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="menu">
        <a href="About.aspx">請點擊我
     
        <div class="showdiv">
            <span>在困难的时候企业就是要手拉手，肩并肩，不能想单打独斗，抱团合作是唯一出路。</span>
        </div>
        </a>
    </div>
    </form>
</body>
</html>

复制代码

說明如下：

1.先寫一個大的div menu包含a標籤，其實沒有也可以。這裡為了測試加上了。

2.定義a標籤，並且裏面包括要顯示的div

3.寫css

3.1 首先應該把要彈出的div進行設置

.showdiv{ display:none; }

3.2 定義a標籤，使產生浮動，為了彈出的div確定位置

.menu a{ position:relative; }

3.3下a標籤的hover

    .menu a:hover .showdiv
    {
       background-color:Yellow;
       display:block;
       position:absolute; z-index:200;
       width:300px; height:200px;
    }

3.4其他說明

彈出的div，最好設置背景，要不看不清楚。

postion 一定要設置，要不會把其他數據推開。

z-index 一定要設置，要不會被其他div蓋住。

這樣就出現了效果。可以直接拷貝我的代碼運行。

二。div 寫到和a標籤同級

代碼如下：

View Code