Here is my html
<div class="pure-u" id="menu" data-ng-controller="gotoUrl">
<div class="pure-menu pure-menu-open">
<a class="pure-menu-heading"
href="#">PennyTracker</a>
<ul>
<!-- Add Transaction Button -->
<li>
<button
class="pure-button pure-button-success pure-button-large"
data-ng-click="setRoute('new')">
<i class="icon-plus"></i>
Transaction
</button>
</li>
......
</div>
and here is the css I try to change the color when hover on li
.pure-menu li.hover {
background: red;
color: #000000;
}
But I see no red color when I hover, I see
What is that I am doing wrong?
You must put : instead of . ,hover is not a class.
.pure-menu li:hover {
background: red;
color: #000000;
}
Related
I want to know how to change the color when hovering over a link
Thanks for any suggestions?
HTML:
<nav>
<a class="underline" href="welcome.html">./home </a>
<a class="underline" href="about.html">./about </a>
<a class="underline" href="projects.html">./projects </a>
<a class="underline" href="ctf.html">./ctf's</a>
</nav>
I did solve it by:
a[href] {
color: #ffff; /* Change this to which color you prefer */
}
In the css
Maybe you can add some css:
<style>
.underline:hover {
color: red; /* text color */
background-color: blue;
}
</style>
Add your own css file to overwrite bootstrap ->
nav a :hover{ color: #yourcolor; }
<style>
.underline:hover {
color: red !important; /* for link text color */
text-decoration: none; /* for delete under line */
}
</style>
I am trying to make div element visible on focus but it is not working. If i change focus to hover it works
JSFIDDLE https://jsfiddle.net/9bo81jyy/8/
HTML
<div class="test">
<nav class="nav">
<ul class="navtabs">
<li>
<a href="showMe/1">
<div class= "inside">
<div tabindex="0" class="delete">
<button tabindex="-1" class="fa-times-circle"> </button>
</div>
</div>
</a>
</li>
</ul>
</nav>
</div>
CSS
.nav > ul.navtabs > li > a > div:focus .delete{
display: inline !important;
}
.delete{
display: none;
}
only a tag ll be focousable so use below code it'll work...i have updated the jsfiddle
.nav > ul.navtabs > li > a:focus .delete{
border: 1px solid red;
display: inline;
}
This <div tabindex="0" class="delete"> is not available in the DOM because of this CSS:
.delete{
display: none;
}
So that <div> can never be clicked on and can never receive focus.
Instead try focus on the <a> tag:
ul.navtabs a:focus .delete{
display: inline !important;
}
And remove the tabindex="0" on the <div>.
New to Bootstrap and creating a basic navigation bar. I am hoping that what I need makes sense. Put simply, I need the background color and text color of list items in the dropdown-menu to match both before and after they collapse. I cannot seem to find the right CSS attributes to edit, and the many combinations that I have tried do not solve my problem. A similar question did not solve my problem, but perhaps it is worth looking at for others.
Below is what the menu looks like before it collapses. Each <li> has a link, or <a>, within it (see basic HTML below). The text color is black, and the background color is white. When the item is hovered over, the background of <li> turns tan. I want the same colors after the menu collapses:
After collapse it appears like this:
The colors seem to change back to Bootstrap's defaults after collapsing. I would like the text for Sub 1 and Sub 3 to be black by default with a white background, while keeping the color behind the header, Stuff 2, the same. The colors seem to work fine when clicked or hovered over (tan background with black font).
Below is some of the relevant HTML and CSS. I know that some of it is messy (and that the use of !important; is often considered poor form), but I hope someone out there can help me identify the block of code so I can get it working and then focus on cleaning it up.
Basic HTML:
<nav class="navbar navbar-inverse">
<div id="navbarbg" class="container-fluid">
<div id="rbgnavbar" class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="logo" class="pull-left" href="http://www.redbuttegarden.org"><img src="images/logo.png" alt="Red Butte Garden"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="rbgwhitelink">STUFF 1 <span class="caret"></span></span></a>
<ul class="dropdown-menu">
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="rbgwhitelink">STUFF 2 <span class="caret"></span></span></a>
<ul class="dropdown-menu">
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="rbgwhitelink">STUFF 3 <span class="caret"></span></span></a>
<ul class="dropdown-menu">
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
Basic CSS:
#rbgnavbar a:hover, a, li, .dropdown-menu li:hover {
color: #000000;
}
.dropdown-menu li:hover {
background-color: #F2EDE4;
color: #000000;
}
/* Main dropdown menu items change cover when selected/clicked */
.dropdown-toggle:active, .open .dropdown-toggle, .dropdown:hover {
background-color: #196143 !important;
}
.dropdown-menu li, .dropdown-menu a {
text-align: center;
color: #000000;
}
.dropdown {
font-size: 10px;
padding: 0;
font-weight: bold;
}
#rbgnavbar {
max-width: 1400px;
margin-left:auto;
margin-right:auto;
background-color:#00502F;
}
.rbgwhitelink {
color: #FFFFFF;
}
.dropdown ul {
padding-top: 0px;
padding-bottom: 0px;
font-size: 10px;
font-weight: bold;
}
/* Border thickness and color between dropdown menu li, padding */
.dropdown-menu li {
border-top: 2px double #D3D3D3;
padding-top: 5px;
padding-bottom: 5px;
}
/* Background color of li in navbar when hovered over */
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu li:hover {
background-color: #F2EDE4;
}
/* Makes dropdown-menu li links bold*/
.dropdown-menu li > a, .dropdown-menu li > a:visited {
font-weight: bold;
}
I suggest to use media queries and add the classes you want to tweak.
For example:
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
.dropdown-menu>li>a {
background-color: #fff;
}
}
For Bootstrap 3 default media queries you may found it here
After some experimenting, this did it:
.dropdown-menu li {
background-color: #FFFFFF;
}
.dropdown-menu li:hover {
background-color: #F2EDE4;
}
.dropdown-menu li > a:hover {
text-decoration: none;
}
/* Changes the color of link text <a> after navbar has collapsed for small screen or mobile mode */
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:visited {
color: #000000;
}
I think you have to change this color:
.dropdown-toggle:active, .open .dropdown-toggle, .dropdown:hover {
background-color: #196143 !important;
}
I have the html code something like this:
<li class="sprite-ps2 wishlist">
<a href="/wishlist/">
My Wish
<br>
List
<p>
<i class="fa fa-list-alt fa-3x"></i>
</p>
</a>
</li>
I need to change background of li in blue color and everything inside of them to be color:white on mouse hover on the li element.
See this fiddle, you need to set background blue for li:hover, and li:hover * to be color white
li:hover {
background: blue;
}
li:hover,
li:hover * {
color: #fff;
}
<li class="sprite-ps2 wishlist">
<a href="/wishlist/">
My Wish
<br>
List
<p>
<i class="fa fa-list-alt fa-3x"></i>
</p>
</a>
</li>
Put the following in a <style> element or a .css file:
li:hover {
background-color: blue;
color: white;
}
Because all child elements inside <li> inherit the properties of their parent, they will have a white color (and a blue background too if they don't specify their own).
I am using the Bootstrap drupal theme. My menu items show up vertically, with styling (underline on hover and a dot next to the them. Am I missing something in my PHP or in my CSS? Also my hover dropdown isn't working. Not sure if that has to do with the way it is showing up now.
<div class="menu_wrapper">
<nav class="navbar" role="navigation">
<div class="container">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">
<?php $navigation = menu_navigation_links('main-menu');
print theme('links__system_main_menu', array('links' => $navigation));?>
</a>
</li>
</ul>
</div>
<div class="clear"></div>
</nav><!-- end main-menu -->
</div>
CSS
/* Menu */
.menu-wrapper {
background-color: #c32523;
opacity: 40%;
width: 100%;
height: 50px;
border-bottom: 1px solid #000000;
}
.navbar {
color: #ffffff;
}
nav {
color: #ffffff;
text-decoration: none;
}
ul.nav li.dropdown:hover ul.dropdown-menu {
display: block;
}
ul.nav li.dropdown ul.dropdown-menu {
margin-top: 0;
}
The menu wrapper class in your HTML is menu_wrapper with an underscore but in your css you used a hyphen .menu-wrapper. Change 1 of them accordingly and your styles will apply.