`
niwtsew
  • 浏览: 72448 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

rollover list

 
阅读更多

http://css.maxdesign.com.au/listamatic/vertical08.htm

Comments: Rollovers can be achieved by converting the a elements within the list to blocks using display: block; and swapping background colors using the a:hover pseudo-class

 

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

CSS
#navcontainer { width: 200px; }

#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#navcontainer a
{
display: block;
padding: 3px;
width: 160px;
background-color: #036;
border-bottom: 1px solid #eee;
}

#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}

#navcontainer a:hover
{
background-color: #369;
color: #fff;
}
 
分享到:
评论

相关推荐

    pkg_maximenuckparams_4.0.7.zip

    maximenu_ck参数设置插件 Multicolumns and multirows Responsive design themes Logo can be added in the ...Compatibility with Joomshopping, can automatically list the product categories (needs the patch)

    640-802(09年5月)试题

    `access-list`用于指定允许转换的IP地址范围,这里允许192.168.16.33/30子网通过。`ip nat pool`定义了公共IP地址池,并用`overload`启用PAT(端口地址转换)以处理多个内部地址映射到一个外部IP的情况。 2. **网络...

    Firefly-RK3399的Android10中的pdf_20211123_1657.7z

    annotation_highlight_rollover_ap.pdf annotation_highlight_square_with_ap.pdf annotation_ink_multiple.pdf annotation_stamp_with_ap.pdf annotiter.pdf barcode_test.pdf BHUSA2014-capstone.pdf black.pdf ...

    CCNA全部实训实训项目

    rollover线是一种特殊的串行线,用于连接路由器的控制台端口(console port)和计算机的串口。其线序通常是DTE-DCE,即RX(接收)对TX(发送),TX对RX,DTR(数据终端就绪)对DSR(数据设备就绪),GND(接地)对...

    Visual C++ 编程资源大全(英文源码 表单)

    05.zip Dynamic child window repositioning 动态改变对话框的大小, 对话框中的控件相应改变(15KB)&lt;END&gt;&lt;br&gt;6,06.zip Enhanced list control 增强的List控件(43KB)&lt;END&gt;&lt;br&gt;7,07.zip CDialog using ...

    dreamweaver上PHP网站开发相关插件

    Random Rollover.mxp 在同样大小的主图片下面可以设置多幅随机翻转的图片。 Move Window.mxp 设置浏览器窗口在屏幕上显示的位置。 Resize Window.mxp 设置浏览器窗口的大小。 Show New.mxp 设置图片在页面中...

    CSS工具-CSS工具

    #### 二、多元素悬停效果生成器 - CSS Multi-element Rollover Generator - **功能介绍**:该工具允许用户通过简单的配置,利用CSS和一张图片创建具有翻转效果的按钮样式。 - **应用场景**: - 创建具有交互性的...

    PHP动态网站开发插件

    Random Rollover.mxp Download 点击下载 在同样大小的主图片下面可以设置多幅随机翻转的图片。 Move Window.mxp Download 点击下载 设置浏览器窗口在屏幕上显示的位置。 Resize Window.mxp Download 点击下载 设置...

    java常用英语

    - **Rollover**: 翻转,鼠标悬停时的动画效果。 - **Menu**: 菜单,用于列出选项供用户选择的界面元素。 - **Slider**: 滑动杆,用于调节值的控件。 - **Clip**: 剪辑,用于表示裁剪或剪切图形的部分。 #### 六、...

    BURNINTEST--硬件检测工具

    PassMark BurnInTest V5.3 ...All Rights Reserved ... Overview ======== Passmark's BurnInTest is a software tool that allows all the major sub-systems of a computer to be simultaneously tested for reliability...

Global site tag (gtag.js) - Google Analytics