个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我目前在侧边导航栏的基础上工作，它将由旧的汉堡包按钮启用。
/* * Navigation Menu
* The Hambuger will open this
*
*/
.navigation-container {
height: 100%;
width: 240px;
background: #FFFFFF;
border-right: 2px solid #252525;
position: fixed;
top: 0;
left: 0;
}
.navigation {
width: 80%;
padding: 0;
margin: 0;
margin-left: 10px;
}
.navigation ul {
margin: 0;
padding: 0;
margin-top: 90px;
margin-left: 20px;
}
.navigation ul li {
/* Setting the area */
list-style: none;
margin: 0 auto;
padding: 20px 0px;
/* Typography changes */
text-decoration: none;
color: #DDDDDD;
font-size: 14px;
font-weight: 600;
letter-spacing: 1.5px;
/* Extra Styling */
border-bottom: 1px solid #DDDDDD;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
.navigation ul .fa {
padding: 0;
margin: 0;
padding-right: 5px;
font-size: 20px;
color: #DDDDDD;
}
.navigation-container, .navigation li, > li {
color: #252525;
}
.navigation ul li:hover {
padding: 35px 0px;
color: #252525;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Aaron Ward's Portfolio</title>
<!-- Stylesheet links -->
<!-- Font Awesome -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Open Sans Typeface Import -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800,600' rel='stylesheet' type='text/css'>
<!-- Personal stylesheets -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- NAVIGATION START -->
<div class="navigation-container">
<div class="navigation">
<ul>
<a href="">
<li>
<i class="fa fa-home fa-fw"></i></span>
HOME
</li>
</a>
<a href="">
<li>
<i class="fa fa-connectdevelop fa-fw"></i>
WORK
</li>
</a>
<a href="">
<li>
<i class="fa fa-user fa-fw"></i>
ABOUT
</li>
</a>
<a href="">
<li>
<i class="fa fa-envelope fa-fw"></i>
CONTACT
</li>
</a>
</ul>
</div>
</div>
</body>正如您将鼠标悬停在 [ul li] 元素上时所看到的，超赞字体图标没有改变颜色。
我试过添加以下内容(结果无效):
.navigation ul li:hover, .navigation ul .fa:hover {
padding: 35px 0px;
color: #252525;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
.navigation ul .fa:hover {
color: #252525;
}
但显然这行不通，因为我希望整个区域都影响两个元素(FA 和
所以最终:将鼠标悬停在受人尊敬的 ul li 元素上时，如何使文本和 Font awesome 图标都改变颜色
最佳答案
您的标记有问题，<a>应该在<li>里面.和 <li>必须直属<ul> ，您可以一次将其全部修复。
a:hover {
color: red;
}
/* if the above code didn't work for you
a:hover, a:hover .fa {
color: green;
}
*/
/* if the above code didn't work for you
a:hover, a:hover .fa::before {
color: blue;
}
*/<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<ul>
<li>
<a href="#">
<i class="fa fa-home fa-fw"></i>
HOME
</a>
</li>
</ul>关于html - 使 FA 在 :hover with <li> 上改变颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29639482/
25
4
0
正如您在此 JSFiddle 中看到的那样，当您将鼠标悬停在 text-content 上时； opacity img 和 img 类返回到正常状态，我想保持 :hover 来自 img 和 img
在 Safari 上，CSS :hover 在具有固定位置的子级在父级外部打开然后关闭后仍然处于事件状态。 鼠标重新进入悬停区域后，它再次起作用。 演示:http://jsfiddle.net/HSC
使用 JQuery，当元素处于悬停状态时，我尝试链接几个函数。 我通常会使用.hover事件函数，但在阅读了一些教程后，我使用 .on 阅读了该函数更好，因为您可以使用一个事件处理程序来监视文档中的所
我已经解决了很多具有相似标题的已解决问题，但我尝试的似乎都没有用。 我希望将 ava.png 图像重定向到另一个页面，但是在悬停时我想要一个 :before 图像(ava_background_hoo
使用以下 html，当我将鼠标悬停在子对象上时，父对象的背景为绿色。我怎样才能阻止这种情况发生？如果我悬停在子元素之外，我确实需要绿色背景。 CSS3 很好。 .parent { padding:
我有两个默认设置为隐藏的子元素。 .child1, .child2{ visibility:hidden; } #parent :hover .child1, #parent:hover .child
所以我试图让我的分页在悬停时平滑地滑动，然后在鼠标离开元素后滑回其原始位置。我已经让它在悬停时滑动，但是当鼠标离开按钮时，它只是快速返回而不是过渡。有人可以帮我解决这个问题吗？ 这是我的代码。 #pa
我有一个 jQuery 问题；我想通过将鼠标悬停在另一个元素上来触发元素上的 :hover 事件，控制台显示错误: Uncaught RangeError: Maximum call stack si
我正在挖掘某人编写的一些 css 代码，我发现了这个: li.hover, li:hover { } .hover 和 :hover 有区别吗？ 也许某些浏览器对 hover 的行为不同？! 最佳答案
使用以下 html，当我将鼠标悬停在子对象上时，父对象的背景为绿色。我怎样才能阻止这种情况发生？如果我悬停在子元素之外，我确实需要绿色背景。 CSS3 很好。 .parent { padding:
找不到我一直想知道的问题的答案。 .class2 a:hover {} 和 .class2:hover a {} 有区别吗？还是偏爱其中之一？ 我一直在使用 .class2 a:hover {} 来改
我不确定标题是否足够好地解释它，但我试图保持简短! 因此，我在页面上散布了许多图像，并为它们创建了一个灯箱画廊(.cboxElement 是调用它的类)。我想添加的是对受灯箱影响的每个图像的悬停效果，
.vpbutton {padding:4px;background-color:#EFEFEF;} .userbox img{padding:8px;background-color:#EFE
我无法让 a:hover 元素正常工作。我是业余爱好者，所以请放轻松...我也尝试过使用#menubar:hover，但这似乎也不起作用。 此代码将进入另一个程序的 header 。我进入这个的唯一原
我到处寻找这个问题的答案，但我找不到任何相关信息。谁能告诉我我们是否可以影响接收元素悬停边界半径属性的区域。以便在击中真实区域查看元素后发生颜色等变化的效果？不要阻止在 DOM 中作为正方形物理存在？
谁能看出我在这里做错了什么？ 我在 中有一些文本元素我想要 text-decoration:none在什么时候 悬停在。请参阅下面的 HTML，我认为它应该可以工作，但是当我将鼠标悬停在 上时文字
我正在尝试创建一个可缩放的 map ，当鼠标悬停在 map 图像上时它会工作，类似于 map 在 Flickr 上的工作方式(请参阅右侧栏上的 map - http://www.flickr.com/
我有一张 table ，我有一个用于 tr:hover 效果的全局 css 代码。但有时我不想在我的 table 上使用这种悬停效果。请查看代码并告诉我如何不对该表运行效果。 JSFIDDLE .这里
我重新开发了我们的一个页面，我注意到它在 上使用悬停元素，尽管点击事件是针对 的标签。所以我将其更改为悬停在 上标签。当鼠标快速移动到每个元素上时，需要相当长的时间才能 catch 。我想没有人
我从来都不是 javascript 下拉菜单的忠实粉丝，所以当我可以使用 CSS 设计下拉菜单时，我会的。但是现在我遇到了一个小问题。 我有一个登录按钮和一个小的登录表单模块，它是按钮的兄弟。当我将鼠
我是一名优秀的程序员,十分优秀！