CSS实例:鼠标滑过文字超级链接背景变色

2016-02-19 23:52 58 1 收藏

今天图老师小编给大家介绍下CSS实例:鼠标滑过文字超级链接背景变色，平时喜欢CSS实例:鼠标滑过文字超级链接背景变色的朋友赶紧收藏起来吧！记得点赞哦~

【 tulaoshi.com - Web开发】

效果如下图

要实现这个效果。很简单。定义CSS样式

a:hover{
background:#f29901;
}

这段代码的显示效果如下图

显然，这样太丑了。

只需要再加上一句
a:hover{
    background:#f29901;
    display:block;
}

即可如效果图所示，当鼠标移动到超链接上的时候，整个li元素背景变色。

可是这样还有一个问题，鼠标必须移动到文字上面才能触发a:hover效果。
如果想要鼠标移动到元素li上的时候，就触发a:hover效果。可以这样写

a {
    width:130px;
    /*li元素的宽度，也就是相当于定义了一个宽度范围，当鼠标移动到上面的范围的时候就触发a:hover效果*/
}

a:hover{
    background:#f29901;
    display:block;
}

下面附上完整例子代码：

html代码：
ul id="content"
    lia href="javascript:;"导航菜单1/a/li
        lia href="javascript:;"导航菜单2/a/li
        lia href="javascript:;"导航菜单3/a/li
        lia href="javascript:;"导航菜单4/a/li
        lia href="javascript:;"导航菜单5/a/li
        lia href="javascript:;"导航菜单6/a/li
/ul

css代码：
#content{}
#content li{
line-height:30px;
text-align:center;
color:#fff;
display:block;
background:#333;
width:100px;
}
#content li a{
display:block;
float:right;
background:#333;
width:100px;
color:#fff;
text-decoration:none;
}
#content li a:hover{
color:#000;
background:#fff;
}

问题虽然小，但是经过自己研究解决印象更加深刻

来源:https://www.tulaoshi.com/n/20160219/1630774.html

上一篇： QQ邮箱发邮件时怎样添加背景音乐
下一篇：解决父容器透明子容器不透明继承问题

看过《CSS实例:鼠标滑过文字超级链接背景变色》的人还看了以下文章更多>>

如何获取TWebBrowser控件的超级链接

标签：编程语言网络编程

procedure getAllLinks2(WB: TWebBrowser; var InnerText,Links: TStringList); //needs unit as :shDocVw,Classes,MSHTML,variants var Htmldoc : IHtmlDocument2; AllLinks : IhtmlElementCollection; Len,I : Integer; //HtmlItem2 :...

超级链接的概念与使用教程

标签： autocad教程

您正在看的AutoCAD教程是:超级链接的概念与使用。超级链接简介超级链接（Hyperlink）可以看作是一种文件的指针，它提供了相关联文件的路径，以指向在本地、网络驱动器或 Internet 上存储的文件，并可跳转到相应的文件；也可以在超级链接中指定跳转到文件中的一个命名位置，例如 AutoCAD中的一个视图或字处理程序中的...

点击网页超级链接虚线怎么去除？

标签： Web开发

深藏多年秘笈大公开，全世界唯一一家公布，怎么点就是点不出，纯CSS去掉按钮或者链接点击产生的虚线。运行代码框 style type="text/css".wrap{position:relative;}.btns{zoom:1;}.btns *{outline:0;zoom:1;background:#f2f2f2;}.btns button::-moz-focus-inner{border-color:transparent!important;}/stylediv class="wra...

网页超级链接该以什么方式打开?

标签： Web开发

一直以来都有这样一个困惑，那就是打开页面间的链接时是在原窗口转换还在新窗口打开呢？如果是在原窗口里转换页面的话，那我还想使用原页面的信息呢？但是在新窗口打开的话，到时候可能是一屏幕的窗口（现在的浏览器都提供标签式浏览我认为这是浏览器至今为止最好的改进，但也会造成成堆的标签排在那而不知道到底哪个才是自己想要的），很容...

转换字符串带有http://的超级链接字符串为真正的超级链接(源码)

标签： ASP

Code Title: Auto-linking Description: How would you like to have every instance of an http:// auto-hyperlink itself to the URL address that follows it? Well, here is a killer little function that will take every one of those that it finds in a string and sets up the hyperlink for you! Cool, eh? Copy and paste...

查看更多精彩>>