Site navigation html:
<div class="main_nav">
<div>Home</div>
<div>Company</div>
<div class="active">Franchise</div>
</div>
When a link is hovered it gets a specific background color.
My question is, how can I keep this hover state while the clicked page is loaded and the old is still displayed? I mean you hover a link item, the background changes, you click the background changes to default and the new site starts loading.
This is not necessay when the new page is loaded fast so you not really see the difference. However I am curious to know if this is possible with just css techniques.
Any ideas?
My css:
.header_wrapper .main_nav div a:link{
display:block;
text-decoration:none;
color:#f5f5f5;
}
.header_wrapper .main_nav div.active a:link{
color:#f5f5f5;
background: url(images/layout/main_nav_bg_hover.png) repeat-x;
}
.header_wrapper .main_nav div a:hover{
color:#f5f5f5;
background: url(images/layout/main_nav_bg_hover.png) repeat-x;
}
.header_wrapper .main_nav div a:focus{
color:#f5f5f5;
background: url(images/layout/main_nav_bg_hover.png) repeat-x;
}
Hey now used to focus properties as like this
a:focus{
// css properties
}
Live demo
Try like this..
If you are having a class for your <a> tag than use this :
a.classname:focus {
color: /*whatever you want*/ ;
}
If you want to apply all <a> than use this :
a:focus {
color: /*whatever you want*/ ;
}
try this:
<div class="<?=($_REQUEST['args'] == 'franchise')?'active': ''?>">Franchise</div>
Related
There is a problem that i can't solve.
I am trying to make button from text by changing it on hover. I am using css to change their font color or background color on hover. There is no problem to this point.
But when i give them a link <a href="www.twitter.com"> I have a problem because at this point my css doesn't work because of html's link hover and visited functions.
The big problem is visited .. i don't want the visited color to work. If visited color works, my links doesn't look like good.
If you can help me about links in texts (making hover) without problem of active section...
Thanks
By giving the link ("a") the css propertie text-decoration:none; the element wont use the underline and visited color any more.
a{
text-decoration:none;
color:white;
}
a:hover{
color:red;
}
div{
background-color:#000;
}
http://jsfiddle.net/7rrruajb/1/
Hope this is what your looking for.
a:visited{
text-decoration:none;
}
Just use a instead of a:link - a applies to unvisited and visited link, a:link just unvisited ones.
Compare the two:
a:link
a:link {
color:red;
}
a:hover {
color:white;
}
<div style="background-color:#666">
hello
</div>
a
a {
color:red;
}
a:hover {
color:white;
}
<div style="background-color:#666">
hello
</div>
I'm currently having a text as hyperlink and on this some CSS code is getting applied. Due to which on hover the text got underline and font gets bold on hover event. But now what I want to do is remove the hyperlink and apply the same effect bydefault i.e. not on hover. In short I want to apply the style currently applying on hover without hovering the text. My HTML and css code is as follows:
.faq .section p.quetn a:hover {
text-decoration:underline;
font-weight:bold
}
<p class="quetn">5.14 Where do i see my test results?</p>
One more important thig is I can't change the above written CSS, I want to override the above CSS code by writing a new class. Can you help me in achieving this? Thanks in advance.
Just use the same rule for when the link is not being hovered:
.faq .section p.quetn a, .faq .section p.quetn a:hover {
text-decoration:underline;
font-weight:bold
}
EDIT
Juse seen that you can't change the CSS for some reason.
Just create a new class with the same styles.
a.class, a.class:hover {
text-decoration:underline;
font-weight:bold
}
<a class="class" title="" href="#">Some Link</a>
EDIT v2
Do you want to style the text but remove the link markup?
It would just be
<p class="class">Text</p>
p.class {
text-decoration:underline;
font-weight:bold
}
Like this
demo
css
.quetn a:hover {
text-decoration:underline;
font-weight:bold;
}
Then instead using
.faq .section p.quetn a:hover
use
.faq .section p.quetn a
If you are targeting only P tag instead of anchor tag, then use it as below :
.faq .section p.quetn
html
<p class="quetn newClass">5.14 Where do i see my test results?</p>
css
.quetn a:hover {
text-decoration:underline;
font-weight:bold;
cursor:default;
}
.newclass a:hover{
text-decoration:none; !important
font-weight:bold; !important
cursor:default; !important
}
Use !important for priority.
Code below for Hover Enable
a:hover {
background-color: yellow;
}
Code below for Hover Disable
a:nohover {
background-color: yellow;
}
I have two kind of links, the one should be white, the other links should be black. Therefore I added a class to the first navigation
<nav class="navigation">
Über mich
</nav>
In CSS I now did this
.navigation
{
float:right;
margin-top:15pt;
}
.navigation a, a:visited, a:active{
color:white;
text-decoration:none;
margin-left:20px;
}
.navigation a:hover
{
color:white;
text-decoration:underline;
text-decoration-color: red;
margin-left:20px;
}
Now I have other links that should be displayed in black and not in white
<b>Source Code runterladen:</b> Link
Note that this link IS NOT inside a navigation tag. So I did this in CSS
.sourceCode a, .sourceCode a:hover, .sourceCode a:visited, .sourceCode a:active
{
color:black;
}
But the problem is that both links are either white or black. I want them to be different, but it doesn't work and I don't really know why.
Here's the complete source code
http://jsfiddle.net/bVN9X/
Note that the Links in the header are white, but also the links that should be under "Projekte" are white, too. I don't really know why.
Your selector must be defined in this way:
a.sourceCode
Because the way you have it now, it's looking for an a tag inside something with a sourceCode class.
You should change you css as shown below:
a.sourceCode, a.sourceCode:hover, a.sourceCode:visited, a.sourceCode:active
{
color:black;
}
<style>
.btn{
display: inline-block;
padding: 15px 10px;
background: gray;
}
.btn:hover{
background:lightgray;
color:red;
}
</style>
<div class="btn">
text
</div>
works nicely. However if we have that:
<div class="btn">
text
</div>
it wouldn't work exactly as the first one. The anchor's text wouldn't be affected. Okay what if we add to the CSS:
.btn a:hover{
background:lightgray;
color:red;
}
That will work, but only if you hover exactly on the anchor, but still hover on the div rectangle wouldn't affect the anchor's text.
How can I tweak that without any javascript, so both rectangles acted identically?
http://jsfiddle.net/vaNJD/
UPD: adding !important keyword wouldn't help
Because all web browsers set a default color (and text-decoration) for a elements, you need a more specific selector to override the default. Try this instead:
.btn:hover, .btn:hover a {
background:lightgray;
color:red;
}
If you really want the two boxes to be identical, you would also need to override the un-hovered button as well:
.btn a {
color: black;
text-decoration: none;
}
It may also be worth pointing out that IE6 only supports the :hover pseudo-class on a elements. You may want to work around this by setting the a to display: block and adding the background color there.
You can accomplish the same effect by getting rid of the container and applying the .btn class directly to the a element. See the third box in this updated fiddle: http://jsfiddle.net/mlms13/vaNJD/5/
.btn:hover{
background:lightgray;
color:red;
}
.btn:hover a{
color: red;
}
Change to:
.btn:hover,
.btn:hover a{
background:lightgray;
color:red;
}
http://jsfiddle.net/vaNJD/4/
Like this?
.btn:hover a{
color:red;
}
I found one way in which you should set height for div tag and use it again for anchor tag and set anchor's display properties as block
for example
<style>
.divest
{
height:120px;
}
.divest a
{
display:block;
height:120px;
}
</style>
<div class="divest">here is hyperlink text</div>
I've got a header menu on my page (www.wortwaerts.net) that works fine on the basis of the code below apart from one issue I could not find a solution for so far: I'd like the menu link that was clicked last to stay highlighted (bold and blue) until another link is chosen which will then be highlighted in the same way. I've already studied some related requests/ answers on this page but couldn't implement the advices successfully (most included javascript) - I'm really a starter as to web development and would be very happy about any hint described in a "foolproof" way ;o)
Thanks a lot for your ideas! Cheers, Felix
#screen > header a{
color:#000 !important;
display:block;
text-decoration:none
}
#screen > header a:hover{
color:#19175C !important;
text-decoration:none;
font-weight:bold;
background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAGCAAAAADBUmCpAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAHklEQVQIHWOI/PT/P4MxkGQwNra/CSV8bv5nAEkAANIFDmMxRyBPAAAAAElFTkSuQmCC) 0 50% no-repeat;
background-size:.25em .375em;
-moz-background-size:.25em .375em;
-webkit-background-size:.25em .375em;
font-weight:bold;
margin-left:-.75em;
padding-left:.75em
}
#screen > header strong a{
background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAGCAAAAADBUmCpAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAHklEQVQIHWOI/PT/P4MxkGQwNra/CSV8bv5nAEkAANIFDmMxRyBPAAAAAElFTkSuQmCC) 0 50% no-repeat;
background-size:.25em .375em;
-moz-background-size:.25em .375em;
-webkit-background-size:.25em .375em;
font-weight:400;
margin-left:-.75em;
padding-left:.75em
}
.ielt8 #screen > header strong a{
background-image:url(assets/img/bg-bullet.png)
}
You will need to use JavaScript for this; there is no CSS pseudo-class that will keep an element in a special state until another link is clicked. Focus is closest to what you want, but focusing other form elements or even tabbing through links would break it.
If you were using jQuery you could do something like this:
# In your CSS
#screen > header a.current {
/* special style just for the current one */
}
# In your JavaScript
jQuery(function($){
var headerAnchors = $('#screen > header a').click(function(){
headerAnchors.removeClass('current');
$(this).addClass('current');
});
});
In your css you can use the :visited pseudo class
a:visited { color: /* your colour */ }
The :active class is applied to a link when a user clicks on it. It will remain until the user releases the mouse and the new page loads, or until they click on another link.
a:active { color: red; font-weight: bold; }
This is an example for how to create css for links. Try it with your class/id names
<style type="text/css">
a:link {
color: #06F;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #F00;
font-weight:bolder;
}
a:hover {
text-decoration: underline;
color: #990;
}
a:active {
text-decoration: none;
color: #93F;
font-weight:bolder;
}
</style>
Changing the #screen > header strong a rule to
#screen > header strong a{
background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAGCAAAAADBUmCpAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAHklEQVQIHWOI/PT/P4MxkGQwNra/CSV8bv5nAEkAANIFDmMxRyBPAAAAAElFTkSuQmCC) 0 50% no-repeat;
background-size:.25em .375em;
-moz-background-size:.25em .375em;
-webkit-background-size:.25em .375em;
font-weight:bold;
margin-left:-.75em;
padding-left:.75em;
color: #19175c!important;
}
will make the currently selected page blue and bold.
It is the same rule that adds the little arrow to the left.
Sorry - the information in the beginning of my answer was cut off: I replaced all href, a, http, image and img with NO - because I'm not allowed to post images and more than one hyperlink... Apart from that I did not change the code of my .js-file.
If you were using jQuery you can set link class based on window.location.href.
You can do it this way or similar:
$('.sidebar-nav > li > a').each(function (index, el) {
if (el.href.indexOf(window.location.href) > -1 || window.location.href.indexOf(el.href) > -1) {
$(el).addClass('current');
} else {
$(el).removeClass('current');
}
})
In this case link will be highlighted even if you come to page directly by typing url in browser.
I am newbie to web development as well and explored some websites where this is implemented. It seems like an easy way to do this is to just add a class (sometimes called "active-trail") to the menu item only on the page it links to and then style that class.