div居中鼠标悬浮显示下拉列表

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#apDiv1 {
    position: absolute;

    width: 100%;
    height: 50px;
    z-index: 1;
    background-color:#F00;

}
#apDiv2 {
    position: relative;
    margin:auto;
    width:960px;
    height: 50;
    z-index: 2;
    background-color:#3F6
}
.apDivx {
    position: relative;
    float:left;
    width: 99px;
    height: 50px;
    z-index: 3;
    background-color:#FF0;
    overflow:hidden;

}
.apDivy {
    position: relative;
    float:left;
    width: 99px;
    height: 50px;
    z-index: 3;
    background-color:#FF0;

}
#apDiv4 {
    position: absolute;

    top: 50px;
    width: 200px;
    height: 91px;
    z-index: 2;
    background-color:#F3C
}
</style>
</head>

<body>
<div id="apDiv1">

    <div id="apDiv2">
        <div id="apDiv3" class="apDivx" onmouseover="this.className=‘apDivy‘"  onmouseout="this.className=‘apDivx‘">
        首页
                <div id="apDiv4">
            战争<br>
            剧情<br>
            爱情<br>
               </div>
        </div>
        <div id="apDiv3" class="apDivx" onmouseover="this.className=‘apDivy‘"  onmouseout="this.className=‘apDivx‘">
        电影
                <div id="apDiv4">
            速度与激情7<br>
            复仇者联盟2<br>
            左耳<br>
               </div>
        </div>

    </div>
</div>

</body>
</html>
时间: 2024-10-05 01:44:26

div居中鼠标悬浮显示下拉列表的相关文章

div跟随鼠标悬浮显示

<span style="font-size:18px;"><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author"

鼠标悬浮显示文字半透明背景

鼠标悬浮显示文字半透明背景 鼠标悬浮头像,出现文字"上传头像",之前都是使用< a title="上传头像"></a>这样的title来实现现在设计稿,是在头像上面,显示的大号字体的文字,且有一层黑色遮罩层第一想法是,多写一个层,悬浮时候,出现即可多想一步,使用css的content:"",来实现content后面的是双引号针对半透明黑色背景层background:#000opacity:0.5这是透明了全部(背景色和文字

bootstrap 鼠标悬浮显示备注信息 两种实现方式

一,(默认黑色字体白色背景) sb.append("<td><a data-content='"+rowData[8]+"'>").append(rowData[4]).append("</a></td>"); $(function(){ // 初始化 popover,触发方式为手动触发 $('a').popover({ trigger: 'manual' }) .on('mouseover', f

鼠标悬浮显示二级菜单

1.布局: <div class="show"> <img src="~/images/head_icon.png" /> <div class="drop" style=" display:none; z-index:80000" id="profileMenu"> <ul> <li> <a class="pass" s

鼠标悬浮标签显示提示内容

1.鼠标悬浮显示内容,可直接在标签里加个title 2.js实现 在标签里定义id 鼠标onmouseover 属性在鼠标指针移动到元素上时触发showstatus(id)函数 鼠标onmouseout 属性在鼠标指针移动到元素外时触发hiddenstatus(id)函数 例:<p id="pid" onmouseover="showstatus(this.id)"  onmouseout="hiddenstatus(this.id)"&g

设置Echarts鼠标悬浮样式

在option下 tooltip内添加以下代码: (本文在后台进行传值 也就是其中的viewstate[]) tooltip: { show: true, trigger: 'axis', //show: true, //default true showDelay: 0,//显示延时,添加显示延时可以避免频繁切换 hideDelay: 50,//隐藏延时 transitionDuration: 0,//动画变换时长 backgroundColor: 'rgba(0,0,0,0.7)',//背景

鼠标悬浮标题切换显示出标题的文字和图片效果

第一种效果: HTML结构: <div class="vewinfor"> <div class="leftin_hd"> <h3>作者热文</h3> <a href="" target="_blank" class="in_more">...</a> </div> <div class="leftin_bd

Js+Css实现鼠标悬浮在特定位置,显示提示信息

想实现的效果就是数据悬浮在“?”上时出现一个div,有一个解释说明,实现效果如下: 1.首先实现“?”样式,在网址http://fontawesome.dashgame.com/ 上下载文件.解压后找到css文件夹下font-awesome.min.css 在html页面进行引用 <link href="/static/font/css/font-awesome.min.css" rel="stylesheet" /> html代码 <i clas

div居中代码 DIV水平居中显示CSS代码

如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? 需要的主要css代码有两个,一个为text-align:center(内容居中),另外一个为margin:0 auto:其两个样式需要配合使用才能实现div盒子的居中显示排版. 首先我们对body设置text-align:center,再对需要居中的div盒子设置css样式margin:0 auto,这样即可让对应div水平居中. 实例讲解div居中代码应用,为了观察div居中效果,我们对div设置一个div命名为".div&