热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

简单的css问题-如果li:如何在li里面改变锚点:悬停-simplecssissue-howtochangeanchorinsideliifli:hover

Ihavethiscode:我有这个代码:<ul><li><a>Link<a>

I have this code:

我有这个代码:


http://jsfiddle.net/pAgS9/ in jsfiddle

http://jsfiddle.net/pAgS9/在jsfiddle中

I want that If i hover the li area, the color of a text should change to white. Now if i hover, it is still black and only if i hover the a, then it becomes white.

我希望如果我悬停在li区域,文本的颜色应该变为白色。现在,如果我盘旋,它仍然是黑色的,只有当我盘旋a,它才会变成白色。

how can i achieve this in css?

我怎样才能在CSS中实现这一目标?

5 个解决方案

#1


5  

li:hover a {
    color: #F0F;
}

#2


1  

.horizmenu {
    width:700px;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.horizmenu li {
    width:80px;
    height:20px;
    display: inline;
    padding: 5px 5px 5px 5px;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    margin-right: 7px;
}
.horizmenu li:active,li:hover{
    background-color: #156ac6;  
    color:white;
}
.horizmenu li a {
    text-decoration: none;
}
.horizmenu li a:hover,a:active {
    text-decoration: none;
}

Fixed jsFiddle: http://jsfiddle.net/GY2ge/

修正了jsFiddle:http://jsfiddle.net/GY2ge/

#3


1  

Just add this css class:

只需添加此css类:

.horizmenu > li:hover > a
{
    color: white;
}

jsFiddle

#4


1  

Change this:

.horizmenu li a:hover, a:active {
text-decoration: none;
color: #ffffff;
}

into this:

.horizmenu li:hover, a:active {
text-decoration: none;
color: #ffffff;
}

#5


1  

.horizmenu li:hover, a:active {
text-decoration: none;
color: #ffffff;
}

推荐阅读
  • 如果应用程序经常播放密集、急促而又短暂的音效(如游戏音效)那么使用MediaPlayer显得有些不太适合了。因为MediaPlayer存在如下缺点:1)延时时间较长,且资源占用率高 ... [详细]
  • javascript分页类支持页码格式
    前端时间因为项目需要,要对一个产品下所有的附属图片进行分页显示,没考虑ajax一张张请求,所以干脆一次性全部把图片out,然 ... [详细]
  • 原文网址:https:www.cnblogs.comysoceanp7476379.html目录1、AOP什么?2、需求3、解决办法1:使用静态代理4 ... [详细]
  • php更新数据库字段的函数是,php更新数据库字段的函数是 ... [详细]
  • Spring – Bean Life Cycle
    Spring – Bean Life Cycle ... [详细]
  • 本文介绍如何在 Android 中自定义加载对话框 CustomProgressDialog,包括自定义 View 类和 XML 布局文件的详细步骤。 ... [详细]
  • oracle c3p0 dword 60,web_day10 dbcp c3p0 dbutils
    createdatabasemydbcharactersetutf8;alertdatabasemydbcharactersetutf8;1.自定义连接池为了不去经常创建连接和释放 ... [详细]
  • 网站访问全流程解析
    本文详细介绍了从用户在浏览器中输入一个域名(如www.yy.com)到页面完全展示的整个过程,包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]
  • 通过 CSS 中的 transition 属性,可以轻松实现元素状态变化时的平滑过渡效果。本文将详细介绍如何使用 transition 属性,并提供一个具体的示例。 ... [详细]
  • [转]doc,ppt,xls文件格式转PDF格式http:blog.csdn.netlee353086articledetails7920355确实好用。需要注意的是#import ... [详细]
  • 开机自启动的几种方式
    0x01快速自启动目录快速启动目录自启动方式源于Windows中的一个目录,这个目录一般叫启动或者Startup。位于该目录下的PE文件会在开机后进行自启动 ... [详细]
  • 通过纯CSS技术,可以轻松创建精致的小圆点和三角形图形。本文详细介绍了如何利用CSS的伪元素、边框和背景属性,实现这些图形的高效绘制,并提供了多种应用场景和示例代码,帮助开发者在网页设计中增添更多视觉效果。 ... [详细]
  • Eclipse JFace Text框架中IDocument接口的getNumberOfLines方法详解与编程实例 ... [详细]
  • 使用PyQt5与OpenCV实现电脑摄像头的图像捕捉功能
    本文介绍了如何使用Python中的PyQt5和OpenCV库来实现电脑摄像头的图像捕捉功能。通过结合这两个强大的工具,用户可以轻松地打开摄像头并进行实时图像采集和处理。代码示例展示了如何初始化摄像头、捕获图像并将其显示在PyQt5的图形界面中。此外,还提供了详细的步骤说明和代码注释,帮助开发者快速上手并实现相关功能。 ... [详细]
  • 精通jQuery:深入解析事件处理机制与应用技巧
    本文详细探讨了jQuery的事件处理机制及其应用技巧,通过具体的代码示例,逐一解析了每个jQuery代码片段与其对应的HTML结构。文章以标记为基准,CSS作为通用样式,确保每段代码都能独立运行。HTML和CSS代码统一放置在文章末尾,方便读者参考和实践。 ... [详细]
author-avatar
christinezzy850
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有