I'm going over the bootstrap site example http://getbootstrap.com/examples/jumbotron-narrow/#
and when I hover my mouse over the "About" or "Contact" links a grey rounded box appears around the text. When the mouse leaves the element, the grey rounded box disappears.
This is driving me crazy! I have inspected these elements and gone through the styles applied to them and have gone through every single one of them, all the inherited ones, the whole lot. Can someone go through the css and tell me exactly how this is happening? I expected to find some sort of :hover or :focus css but none exists. Furthermore it is not javascript that is changing the background as I have tested the site with javascript enabled.
Please help and I will love you forever.
The code you are looking for:
.nav > li > a:hover, .nav > li > a:focus {
text-decoration: none;
background-color: #EEE;
}
Super simple, fix:
<link bootstrap />
<link custom /> <-- Overwrite CSS by placing external file after in HTML
Or:
<link bootstrap />
<style></style> <-- Overwrites bootstrap's external CSS
CSS to change is simple:
.nav > li > a:hover, .nav > li > a:focus {
background-color: none;
}
Why does Bootstrap make it so if you hover, it turns grey?
It is because it tells the visitors, that they are on something clickable: a link. And making it more user-friendly and improves a website's UX.
There are an CSS applied when you hovered these elements -
.nav>li>a:hover, .nav>li>a:focus {
text-decoration: none;
background-color: #eee;
}
Please see highlighted in red -
Demo
html
<ul class="nav">
<li> About
</li>
</ul>
css
.nav>li>a:hover, .nav>li>a:focus {
text-decoration: none;
background-color: #eee;
}
.nav>li>a {
position: relative;
display: block;
padding: 10px 15px;
border-radius: 4px;
text-decoration:none;
width:50px;
text-align:center;
}
.nav {
list-style: none;
}
The buttons background turns grey because of the following css in the bootstrap.min.css file:
nav>li>a:hover,.nav>li>a:focus{text-decoration:none;background-color:#eee}
You can run a find on the code mentioned before to find it in the bootstrap.min.css file.
Related
When I copied some necessary codes to jsfiddle it works correctly but it is not working in my website.
My key problem with Tab menus like Our Rooms, Our Gems are not working perfectly when I hover there.
this is the site in which hover is not working correctly
this is working jsfiddle
Edit
I think the main problem is difficult to understand. So I'm giving a hint. Just change #tabs li a with height: 200px; then you'll see the pointer is not hovering over the text but below the text.
I assume that you want a pointer on the entire tab, so you need to modify your class like this on line 1877 in template.css
#tabs li a {
color: #E79D34;
display: block;
font: 20px/50px calibri;
height: 100%;
text-decoration: none;
}
It works in your fiddle because the CSS is NOT normalized, in your website, CSS is normalized.
Demo of not working fiddle
The issue is your h1 tag having class logo, it is overlapping your tabs
Try this
a:hover, #tabs li a:hover {
color: #FFF;
text-decoration: none;
}
In your code there is something that overwrites your :hover. It is either an !important keyword or another definition of :hover after the one you try to fix. Review your code or try using !important in the hovered block.
coz
you have made
a
{text-decoration:none;
}
a:hover
{text-decoration:none;
}
there is no difference in a & a:hover
change something in a:hover
Add this to your style, this will work
#tabs li:hover {
cursor: pointer;
}
you can also do it this way:
#tabs li a,
#tabs li:hover,
#tabs li a:hover {
cursor: pointer;
}
I want to create menu like this:
I want to see red square on acitve page and after hover. Menu is created by:
<div id="menu">
<ul>
<li><a href="#"><span>Home</span><a></li>
<li><a href="#"><span>About</span><a></li>
<li><a href="#"><span>Contact</span><a></li>
</ul>
</div>
I am trying to create this for 2 hours and nothing:( Can you give me an advice?
Here is a working jsfiddle for you:
http://jsfiddle.net/6sCZh/
li { list-style: none; float: left; background: url(http://getpersonas.cdn.mozilla.net/static/9/0/66090/preview_small.jpg) repeat-x; background-position: 0px 10px; }
ul { }
li a { display: block; color: #fff; text-decoration: none; margin: 14px; }
li a.active, li a:hover { background-color: brown; padding: 11px; margin: 3px; }
I've added a css class "active", which should be set server-sided with your php code or by setting it static in the html markup. Unfortunately I don't know a better way. Also a "clear"-tag would be nice because of the float :)
But maybe it helps a bit ;-)
The easy way to do this is to give your anchor tags (or, better, their parent li elements) a class when they are selected.
Then create a rule that targets li.selected and li:hover which places the red box.
I cannot be more specific without seeing your HTML AND CSS.
For the gradient you'll need CSS3 or image. I used gradient generator for the demo - http://www.colorzilla.com/gradient-editor/
The idea is the active link to be higher that the menu and with negative top and bottom margins which compensate for the height difference. And don't put overflow: hidden to the menu :)
http://jsfiddle.net/23zZE/
I have taken the links dynamically which are coming in a list. When i click on the link, in other container its page opens. I want to change the visited link color.Basically the block background color. I am able to change color on click. but i need it will stay as it is until n unless i refresh the page. I used
ul
{
list-style-type: none;
margin:0;
padding:0;
text-decoration:none;
display: block;
}
a {
text-decoration: none;
display: block;
}
ul li{
padding-bottom: 10px;
text-decoration: none;
}
li:hover {
background-color:#7EA5E4;
}
li a:visited, a:active{
background-color: #09F;
}
Please suggest me where i have to do changes.
That is, what :visited does. But you "block" is the list item, which can't be visited, because it isn't a link. Style you anchor as block by moving the appropriate styles from the list item to the anchor. That way you also could style the background.
You could try something like, changing the colour / font family to suite you
.Link A:visited {
text-decoration: none;
font-family: arial,sans-serif ;
color: #fff;
}
The .link is a custom class
Hope this can help,
Thanks,
Jack.
i hope you are looking like this:- http://tinkerbin.com/VsbhpxGi
you just have to make .active class and define in li
like this :-
li.active {
background-color:#7EA5E4;
}
UPDATED ANSWER
i hope you are looking like this if you will click on any link so that link will be active...... see the updated answer...
http://tinkerbin.com/Fm0lRO8Z
On hover, my text links have underlines. This is the default in Bootstrap.
I want to keep this, unless the link is within a certain div.
The code I have tried (and several variations) doesn't work.
The HTML:
<div class="wall-entry span5">
<a href="">
<img src="http://www.placehold.it/290x163" />
<div class="wall-address">
<p>Burgundy Street</p>
<p>New Orleans, LA</p>
<p>USA</p>
</div>
</a>
</div>
My CSS:
.wall-entry {
background-color: #black;
position: relative;
img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
div {
position: absolute;
left: 10px;
bottom: 10px;
p {
line-height: 18px;
margin: 0;
font-family: Neuzit Heavy;
font-size: 18px;
color: white;
text-decoration: none;
}
}
}
div.wall-entry:hover img {
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
a div.wall-entry {text-decoration: none;}
A quick note: I have tested a {text-decoration: none;}, this does work. However, I don't want to change everything. Just the links in this specific case.
put the font-family in quotes for fonts that involve multiple words, first of all:
font-family: "Neuzit Heavy", sans-serif;
then beneath a put .wall-entry a:hover { text-decoration: none; }
You have the order switched around. The item you're targeting should be to the right. For example,
.wrapper .header a in english means "Target all anchor links that are inside of .header, that are inside of .wrapper"
The problem is actually a caused by Twitter Bootstrap's CSS file, not your code.
Twitter Bootstrap's CSS file (bootstrap.min.css was the culprit on my project) gives links underlines multiple times. It gives them an underline when they're hovered over, when they're focused on, and it even makes them blue.
In my project, I specifically assigned my own colors to the text that was inside anchor tags, and the browser rendered their colors correctly, just as I assigned them, however, since the text was wrapped in an anchor tag, the blue underline from the Twitter Bootstrap stylesheet still appeared below all my styled text.
My solution: open bootstrap.min.css (or whatever your Bootstrap stylesheet is called) and search for the term 'underline', and whenever you find 'text-decoration: underline' inside an anchor tag selector, like this:
a:hover, a:focus {
color: #2a6496;
text-decoration: underline;
}
or this:
a, a:visited {
text-decoration: underline;
}
you should go ahead and remove the color and text-decoration rules.
That solved my problem.
This won't work
a div.wall-entry {text-decoration: none;} // Inside 'a' div with class wall-entry
but this will work.
div.wall-entry a{text-decoration: none;} // Inside div with class wall-entry 'a'
because an a tag has text-decoration.
If your link is inside div tags, then you can select your link this way:
div > a:hover {
text-decoration:none;
}
It works fine, even with boostrap used.
So I'm just trying to create a small website. (Don't worry that's not going
to be the title)
Right now the "Home" "News" "Gallery" and "About us" are not actual buttons that direct to another page. When I do
Home
The button turns into color purple and it is underlined. (I know this is how links are shown) But is there a way that I can make these buttons stay color orange like in the picture without them turning blue and underlined. Thanks
http://imgur.com/Czsk4
You can set the styles inline, but the best way to do it is through a css class.
To do it inline:
Home
To do it through a class:
Home
a.nav-link:link
{
color: #fb3f00;
text-decoration: none;
}
a.nav-link:visited
{
color: #fb3f00;
text-decoration: none;
}
a.nav-link:hover
{
color: #fb3f00;
text-decoration: none;
}
a.nav-link:active
{
color: #fb3f00;
text-decoration: none;
}
To do it through a class, you need to put the css code in a separate css file and link it in or you can put it in the head of the document. The best practice is to put it in an external css file so it can be used throughout.
If you want the orange to be on every link throughout, just remove the ".nav-link" part of the classes and remove the class="nav-link" from the link tag. This will make all links orange unless you have defined a another class and explicitly applied it to a link tag.
Good Luck!
Using CSS instead of inline styles will work much better:
a {
color:orange;
text-decoration:none;
}
You can also get fancier and have the underline appear when you hover:
a:hover, a:focus {
text-decoration:underline;
}
This can help improve user experience (UX), though if the links are in the header it may be naturally apparent that they are links. (UX design is more complex than this of course, because you have to consider things like touchscreen users that have no "hover". :) )
All links come with different states so if you want them to stay with just one color you can modify all the states together like so:
a:link, a:visited, a:hover, a:active { color: orange }
You can do that by using CSS.
to set this in your code right at the end of the head-section
<style TYPE="text/css">
a:link, a:visited, a:hover, a:active { color: #ff8080;
text-decoration: none;
}
</style>
and change the #ff8080 in your color
I have the perfect solution for you!
I'm copying and pasting straight from my code. make it relevant to you. This definitely works for what you are trying to achieve.
<style type="text/css" media="screen">
a:link { color:#ffffff; text-decoration: none; }
a:visited { color:#33348e; text-decoration: none; }
a:hover { color:#91ac48; text-decoration: none; }
a:active { color:#7476b4; text-decoration: underline; }
</style> Order Now