I'm trying to create a hover link using css but it's not working. Is this the correct way to create css hover links? Thanks,
I have read though this but no luck: http://w3schools.com/css/css_link.asp
Here is the code I have:
CSS
.Footerbullets{
padding:3px 0 3px 25px;
background-image:url(../images/menubar/footer_bullet.jpg);
background-repeat:no-repeat;
}
.Footerbullets a.link {
color:#FFF;
}
.Footerbullets a.hover {
color:#FF0;
}
HTML
<div id="footer"><div class="content">
<ul>
<li class="Footerbullets">Link with Hover Color Change</li>
</ul>
<div class="clear"></div>
</div></div>
Use div#footer ul li.Footerbullets a:hover instead of .Footerbullets a:hover, it seems that div#footer ul li a:hover is overriding other styles.
http://jsfiddle.net/GFec3/14/
I made a jsfiddle with a working example for each anchor pseudo-class. I tested it and it works in the latest version of Safari at least. You can find it here:
http://jsfiddle.net/kylewlacy/DqePq/
You can read about each pseudo-class and what they do here, as well
Try this
.Footerbullets a:hover {
color:#FF0 !important;
}
My code
<style>
.Footerbullets{
padding:3px 0 3px 25px;
background-image:url(../images/menubar/footer_bullet.jpg);
background-repeat:no-repeat;
}
.Footerbullets a.link {
color:#FFF;
}
.Footerbullets a:hover {
color:#FF0;
}
</style>
HTML
<div id="footer"><div class="content">
<ul>
<li class="Footerbullets">Link with Hover Color Change</li>
</ul>
<div class="clear"></div>
</div></div>
Related
I have an inline stylesheet that is cascading really strangely.
I have a menu made with a <ul> and I want to make it so that when a user is on a page, the background color of the current page link on the <li> is green. I did this by creating an ID with background-color: #288E3A;, but despite placing it after the ID for the menu, I cannot make the current <li> turn green. The only way I can get it to work is to use !important, but I cannot bring myself to use that solution. -shudder-
I have a feeling this is probably something really simple I am missing. Can someone explain where I went wrong?
#menu ul {
padding: 15px;
list-style-type: none;
}
#menu ul li {
background-color: #363636;
margin: 0px 0px 15px;
line-height: 50px;
padding: 0px 5px 0px 5px;
}
#current_page ul li {
background: #288E3A /*!important*/;
}
<div id="menu">
<p>MAIN MENU</p>
<div id="button_container">
<ul>
<li id="current_page">HOME</li>
<li>CAR LOANS</li>
<li>AUTO LOAN REFINANCING</li>
<li>AUTO CALCULATORS</li>
<li>TOOLS AND RESOURCES</li>
</ul>
</div>
</div>
<div id="content_container">
<img src="img/cf_mobile_website-4.jpg" />
</div>
your css is incorrectly specifying the element, what you want is this :
#menu ul li#current_page{
background:#288E3A;
}
Better yet you could use css to specify the first child so you wont need to add a custom id:
#menu ul li:first-child{
background:#288E3A;
}
I am trying to use two Twitter Bootstrap navs on the same page. I have written some css to style them. Problem is, I want the css to apply to just one of the navs. I tried to use css ids to distinguish the two navs, but am having trouble getting the selectors right. Can anyone help?
Here's a simplified version of what I'm trying to do: http://jsfiddle.net/XVReX/
HTML:
<div id="something" class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li id="selectEventStep"><a>Select Event</a>
</li>
<li id="selectPriceStep"><a>Select Price</a>
</li>
<li id="confirmSwapStep"><a>Confirm Swap</a>
</li>
</ul>
</div>
</div>
</div>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li id="selectEventStep"><a>Select Event</a>
</li>
<li id="selectPriceStep"><a>Select Price</a>
</li>
<li id="confirmSwapStep"><a>Confirm Swap</a>
</li>
</ul>
</div>
</div>
</div>
CSS:
#something.navbar #something.navbar-inner {
padding: 0;
background-image: -webkit-linear-gradient(top, #E5665D, #C4564F);
}
#something.navbar #something.nav li a {
font-weight: bold;
text-align: center;
color: #FFE2E0;
text-shadow: 0 1px 0 #000;
;
}
#something.navbar #something.nav li a:hover {
color: #fff;
}
Thanks!
The selectors are more complicated than necessary and the syntax is incorrect - you can override bootstrap.css by instead using:
#something .navbar-inner { }
#something .nav li a{ }
#something .nav li a:hover { }
jsFiddle
I rewrote the entire style sheet to apply the style only on those elements with a class name .bootstrap using sass compiler and regular expression which looks like this
audio.bootstrap:not([controls]) {
display: none;
}
html.bootstrap {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
a.bootstrap:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
I haven't checked everything but I think it works alright.
http://jsfiddle.net/Lc5h6/
When I toggle IE9's Compatibility VIEW on/off, my navbar shifts positions:
When Compatibility View: ON:
navbar is centred fine. :)
When Compatibility View: OFF:
navbar is shifted to the right slightly. :(
NOTE: I could NOT attach a screenshot due to certain site restrictions. :(
Obviously I would like to correct this, but cannot; thus, why I am posting here. :)
My CSS file looks as follows:
/*background image for outside area*/
#outside {
background-image:url('/images/body_bg.gif');
}
/*style for main area*/
#main {
font:16px "Trebuchet MS", arial, verdana, serif, monospace;
margin-left:auto;
margin-right:auto;
width:1020px;
border:5px outset darkgrey;
background-color:white;
}
/*background image*/
#bg {
background-image:url('/images/content_bg.gif');
}
/*horizontal list item widths*/
ul.two li{width:50%;}
ul.four li{width:25%;}
ul.five li{width:20%;}
/*submenu list item widths*/
ul.sfour li a{width:25em;} /*alternate value = 19.1em*/
ul.sfive li a{width:18.5em;} /*alternate value = 15.3em*/
/*top navigation bar*/
#topnav ul {
list-style-type:none;
margin-left:auto;
margin-right:auto;
width:100%;
overflow:hidden;
}
#topnav li {
float:left;
}
#topnav li a {
background-color:#606060;
color:white;
display:block;
font-size:large;
font-weight:bold;
font-variant:small-caps;
padding-top:4px;
padding-bottom:4px;
text-align:center;
text-decoration:none;
}
#topnav li a:active {
color:yellow;
}
#topnav li a:hover {
background-color:#888888;
}
/*topnav submenus*/
#topnav li ul {
display:none;
position:absolute;
}
#topnav li:hover ul {
display:block;
}
#topnav li:hover li {
float:none;
}
#topnav li:hover a {
background-color:#888888;
}
#topnav li:hover li a {
display:block;
font-size:small;
font-weight:normal;
font-variant:normal;
text-align:center;
text-decoration:none;
}
#topnav li:hover li a:hover {
background-color:#B0B0B0
}
/*page title*/
h1 {
border-bottom:3px solid black;
color:gray;
margin-left:auto;
margin-right:auto;
width:90%;
}
/*content*/
#content {
margin-left:auto;
margin-right:auto;
width:90%;
}
My _Layout.cshtml file is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>C4DP - #Page.Title</title>
<link href="#Href("~/Styles/Style.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/scripts/functions.js"></script>
<script type="text/javascript" src="/scripts/sorttable.js"></script>
</head>
<body id="outside">
<div id="main">
<img src="/images/title_c4dp.gif" alt="C4DP" width="100%"/>
<div id="bg">
<div id="topnav">#RenderPage("~/navbar_Top.cshtml")</div>
<h1>#Page.Title</h1>
<div id="content">
#RenderBody()
</div>
<div id="bottomnav">#RenderPage("~/navbar_Bottom.cshtml")</div>
</div>
<p id="copyright">© 2012 C4DP. All rights reserved.</p>
</div>
</body>
</html>
The navbar file looks as follows:
#if (WebSecurity.IsAuthenticated) {
if (!Roles.IsUserInRole("admin")) {
<ul class="four">
<li>News</li>
<li>Stats
<ul class="sfour">
<li>Earnings</li>
<li>Session Average</li>
<li>Ranking</li>
</ul>
</li>
<li>Profile
<ul class="sfour">
<li>Personal Info.</li>
<li>Change Password</li>
</ul>
</li>
<li>Logout</li>
</ul>
} else { //logged in as administrator
<ul class="five">
<li>News</li>
<li>Stats
<ul class="sfive">
<li>Earnings</li>
<li>Session Average</li>
<li>Ranking</li>
</ul>
</li>
<li>Admin
<ul class="sfive">
<li>Cardrooms</li>
<li>Events</li>
<li>Members</li>
</ul>
</li>
<li>Profile
<ul class="sfive">
<li>Personal Info.</li>
<li>Change Password</li>
</ul>
</li>
<li>Logout</li>
</ul>
}
} else {
// nav bar when NOT logged in
<ul class="four">
<li>Home</li>
<li>Rules</li>
<li>Login</li>
<li>Request Membership</li>
</ul>
}
Please help!
It turns out that my navbar needed the {display:inline;} and {padding:0;} attributes added to it to make it work.
Not being a real guru at this stuff, I assume the INLINE attribute prevented it from being "pushed over" by its neighbouring element, and that the PADDING:0; attribute ensured that the navbar fit properly in its parent element.
If a "real guru" (someone with more experience than me) could confirm my assumption, that would be much appreciated. Thank you in advance.
To my knowledge, the answer to this is no, can't be done, but I need a second opinion:
If I have the following:
<li>
<a >#</a>
<div class="sub">
#
</div>
</li>
and have a background image that appears on li a:hover is it possible to have that background stay on when hovering on the .sub div? This also has to work pure CSS - no javascript cheats.
My understanding is because .sub isn't a child of the a we can't reference it in css to keep the hover.
Because the image is for only one section of the code, I can't move it to the li and reference li:hover a.
Not sure what all you are trying to achieve, but there are many hover effects that can be done.
SECOND UPDATE: If you don't need to interact (other a tags, etc) at all with anything in the div, then this way cheats to get the effect. Note how the anchor inside the div does not register because of the z-index.
UPDATE I think I understand your issue better now. Can you add a wrapper and do the following?:
Example HTML:
<ul>
<li>
<div>
<a>Some anchor text</a>
<div class="sub">Some div content <a>and anchor</a></div>
</div>
</li>
</ul>
Example CSS:
li:hover {
background-color: cyan;
}
li > div:hover > a {
background-color: green;
}
a:hover {
color: yellow;
display: block;
}
a:hover + .sub {
outline: 1px solid blue;
}
.sub:hover {
color: red;
outline: 1px solid red;
}
If you can't use a class on the li or modify the div.sub to be in the a, you're probably out of luck without Javascript:
Is there a CSS parent selector?
However, if you can, you could use:
<ul>
<li class="sub">
<a>Class #</a>
<div class="sub">#</div>
</li>
<li>
<a>Inner #
<div class="sub">#</div>
</a>
</li>
<li>
<a>None #</a>
<div class="sub">#</div>
</li>
</ul>
li.sub:hover,
li a:hover {
background: url(http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=32&d=identicon&r=PG);
}
li a {
border: 1px solid blue;
display: block;
}
.sub {
border: 1px solid green;
}
http://jsfiddle.net/B7Au2/4/
I don't know if you can modify the html, but if you can, try swapping the div and the a:
<li>
<div class="sub">
#
</div>
<a >#</a>
</li>
Now you can use the adjacent sibling selector:
li a:hover, li .sub:hover + a {background:url('some-image.png')}
Unfortunately there's no way to select the previous element through CSS: that's why you need to swap your elements.
I've got an expandable css menu that is acting a bit weird in ie, but works fine in firefox. Anyone who can help me is appreciated.
Heres the problem. When I click the li it expands to the sub li fine, however, if I keep the mouse directly over the li I just clicked on, the text in the sub li's don't show. See this picture...notice where the mouse is located, and notice there is no text next to the sub li's. The anchor tag is represented by the dotted line.
If I move the mouse to the right (or anywhere off of the text "Los Angeles") the sub li's show up.
Notice the mouse now and the li's showing up in this picture:
Heres the css and html:
<HTML lang="en_US" sizcache="7062" sizset="0">
<HEAD>
<STYLE>
ul.left_menu{
position:relative;
float:left;
width:100%;
}
ul.left_menu li>a:hover{
cursor: pointer;
}
ul.left_menu li {
list-style-type:none;
position:relative;
padding-top: 5px;
clear:both;
}
ul#nav{
text-indent:15px;
}
#nav li > ul{
display:none;
padding-left:15px;
text-indent:15px;
}
#nav li {
line-height:11px;
}
#nav > li{
clear: both;
padding-left:15px;
line-height:11px;
}
A {
TEXT-ALIGN: left;
TEXT-DECORATION: none;
outline: none
}
</STYLE>
</HEAD>
<BODY>
<UL id="nav" class="left_menu">
<LI>
<A >Los Angeles</A>
<UL>
<LI>
<A>Commercial Properties</A>
<UL>
<LI>
<A>Office</A>
</LI>
<LI>
<A>Industrial</A>
</LI>
<LI>
<A>Retail</A>
</LI>
</UL>
</LI>
</ul>
</li>
</ul>
</body>
</html>
Thanks for your help.
This is called the Peek-a-boo bug. Here is an explanation of the bug and a fix:
http://www.positioniseverything.net/explorer/peekaboo.html