I have the following <li> and I would like the whole li to behave as a link. Currently, only the text in the span acts as a link. Also, is it possible to change the colour of the text on hover. My code only changes the colour of the text when I hover over it, but stays the same when I hover elsewhere in the block. Any help is appreciated.
I've put the demo on jsfiddle: http://jsfiddle.net/noscirre/JtVGp/4/
Try this
http://jsfiddle.net/Bongs/JtVGp/5/
I've added class to the link and some css to li and the link...
HTML
<li class="app1">
<a title href="#" class="blocklink">
<span>ANOTHER APP</span>
</a>
</li>
CSS
.app1 {position:relative;}
.blocklink{position:absolute;top:0px;left:0px;width:100%;height:100%;}
With respect to the changing color, change your last CSS entry from
#app-container ul.apps li:hover a:hover { color: #fff; }
to
#app-container ul.apps li.app1:hover a { color: #fff; }
To make the whole <li> box behave like a link, you can add an onclick handler via JavaScript to it, e.g., like this:
var li = document.querySelector( '#app-container .app1' );
li.addEventListener( 'click', function(){
window.location = 'your/new/url';
} );
and maybe change the cursor attribute by using cursor: pointer (MDN link).
Simply add this style to your navigation:
ul.menu > li > a {
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
This solution does not consider a span tag inside. The HTML looks like this:
<ul class="menu">
<li><a>Navigation Point 1</a></li>
<li><a>Navigation Point 2</a></li>
</ul>
Related
I'm trying to format some links within an unordered list using an external stylesheet, when the links are moused over they should increase in size and be displayed blue. My syntax is below:
HTML
<ul>
<li>
<a href="#dejaview"><img src="imgs/dejaview_lft.gif" width="95px" height="75px" alt="Dejaview"
title="Click for more info"/>Dejaview</a>
</li>
There are three more links below this before the UL ends
Stylesheet
ul.a:hover
{
font-size: 200%;
color: blue;
}
What am I doing wrong here, I can't work it out.... I have tried both li.a:hover and what is currently above, and I was under the impression that if I wanted to change the format for all links within a list I didn't need to create a class for them. I could be wrong though, I'm a n00b to CSS
Thanks
Rick
ul li a:hover
{
font-size: 200%;
color: blue;
}
Should work
because the dot '.' in before 'a' stands for a class called 'a'
Your CSS is wrong.
You need to edit like below.
ul a:hover
{
font-size: 200%;
color: blue;
}
ul.a:hover will work when your code like below; '.' means 'class'.
<ul class="a">
<li>hi</li>
</ul>
I want to create a nav bar that uses anchor links (the nav bar is fixed and the user stays on one page). By default, I'd like to have the first link in the nav bar styled with a background highlight to indicate it has been selected. If the user clicks on a different link on the nav bar, I'd like that link to be given the selection styling instead.
Is there a pure HTML/CSS method to do this?
Edit: I am currently tinkering with turning the nav links into secret radio buttons. I'll report back if I get it to work.
You can use the :active Selector.
a:active {
background-color: yellow;
}
This style will be applied to the last element you clicked on... once you lose focus though, it will not retain the style.
It would be much better to just change the class via javascript if you can, in my opinion anyway.
CSS
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + a {
background: blue !important;
color: white !important;
}
HTML
<input type="radio" id="x" name="selectedLink" checked />
<a href="#associatedAnchor1" onclick="document.getElementById('x').checked = true">
This is a link that will apply 'selected' style to itself and
strip the 'selected style from all other links in its group
</a>
<input type="radio" id="y" name="selectedLink" />
<a href="#associatedAnchor2" onclick="document.getElementById('y').checked = true">
This is a link that will apply 'selected' style to itself and
strip the 'selected style from all other links in its group
</a> <!-- and so on -->
It uses a tiny amount of JavaScript, but it's the closest thing to an answer that probably exists. Hope it's useful to somebody! :)
You can use :target and style with that. It would look something like:
li {
display: inline-block;
float: left;
border: 1px solid white;
}
a {
color: white;
text-decoration: none;
padding: 15px;
background-color: #bada55;
}
#targetDiv {
width: 50px;
height: 50px;
background-color: #bada55;
float: right;
border: 1px solid white;
}
:target {
background-color: purple !important;
}
<ul>
<li>First
</li>
<li>Second
</li>
<li>Third
</li>
<li>Target
</li>
<li>Target Div<li>
</ul>
The fiddle.
Note
This will interfere with the browser history, so you may want to watch out for that. It could also create a "jump", but if it's a fixed navigation you may be fine. The fiddle has a e.preventDefault() on the links to prevent the jump, but I think you could be fine without it.
UPDATED
Added a fiddle and included targeting other divs as per the comment.
I have an image and a text next to it (put in a list, each in a li) and what I want to do is when I hover ANY of them, the image changes to another, and the text changes color.
Here is my code:
<ul id="recherche">
<li><img id="glo" src="images/glosaire_off.png" alt=""/></li>
<li>Glossaire</li>
</ul>
And this is the hover that I want to do for the image change:
#glo:hover{
background-image:url(../images/glosaire_on.png) ;
}
So does anyone know how to apply a hover effect on both things, as soon as we hover any one of them? Thanks!
Image set using src attribute of img tag will overlap the image set using background-image style. What you need to be doing is this:
Demo
HTML:
<ul id="recherche">
<li><img id="glo" src="#" alt=""/></li>
<li>Glossaire</li>
</ul>
CSS:
ul:hover #glo{
background-image:url(../images/glosaire_on.jpg) ;
}
ul:hover a{ color: teal;}
ul #glo{
width: 300px;
height: 200px;
background-image:url(../images/glosaire_off.jpg) ;
}
ul a{ color: green;}
Also, you'll need to mention the width & height for the img element.
EDIT:
In order to apply hover to sets of 2 li elements in tandem, you will need to encapsulate them in their individual ul element as follows:
<ul id="recherche">
<li id="glo"></br></li>
<li>Glossaire</li>
</ul>
<ul>
<li id="rech"></br></li>
<li>Recherche</li>
</ul>
Updated fiddle
Also, check out the CSS change needed to ensure right elements are targetted.
CSS:
ul {
width: 300px;
}
ul:hover li:first-child {
background-image:url(http://mailboxtolucalake.com/wp-content/themes/thesis/rotator/sample-2.jpg);
}
ul:hover li:first-child + li a {
color: teal;
}
ul li:first-child {
width: 300px;
height: 200px;
background-image:url(http://mailboxtolucalake.com/wp-content/themes/thesis/rotator/sample-1.jpg);
}
ul li:first-child + li a {
color: green;
}
I've used first-child selector and sibling selector of CSS (+) to target appropriate elements.
You can do this two ways !
I would prefer using a class="" selector !
WARNING: You set the attribute src: but you attempt at changing the background-image:
lets says that
<ul id="recherche">
<li></li>
<li>Glossaire</li>
</ul>
You do the inline one because you dont want the background-image to be applied to the second anchor tag
now the CSS:
.glow{
background-image:url('/*some url*/');/*the default one*/
}
.glow:hover{
background-image:url('')/*New url inside*/
color:/*some color here, this helps with the text color*/;
}
Try this:
#recherche:hover #glo{
background-image:url(../images/glosaire_on.png) ;
}
here is answer
li:hover {
background-image:url(../images/glosaire_on.png) ;
}
#recherche li a:hover{ background:url(../images/glosaire_on.png)}
To start with you have glosaire_off.png on mark up and your are trying to apply a background image on hover using CSS. Surely, you want to change the img src to glosaire_on.png when on hover and change the text colour? if that's the case you will have to use JavaScript to do this.
EDIT
Assuming you have jQuery
<ul id="recherche">
<li><img id="glo" src="images/glosaire_off.png"/>Some text</li>
<li>Glossaire</li>
</ul>
$(document).ready(function () {
$("#glo").mouseenter(function(){
$(this).attr("src","images/glosaire_off.png");
$(this).parent().css("color", "green");
}).mouseleave(function(){
$(this).attr("src","images/glosaire_on.png");
$(this).parent().css("color", "red");
});
});
JSFIDDLE
I've got some HTML code I can't modify. I don't want to use JS/jQuery to do this, would like to get it done with cross-browser friendly CSS.
The HTML looks like this:
<ul class="list">
<li class="item">
<a href-"#">Item One</a> |
</li>
<li class="item">
<a href-"#">Item Two</a> |
</li>
<li class="item">
<a href-"#">Item Three</a> |
</li>
</ul>
It's got those stupid pipes in there to break up the list. I Want to hide those, and show the <a> elements. I don't just want to make the text color the same as the background either. I'd like an equivalent of display: none;
You can set the font-size of the li to 0 and give it a transparent color, then set those properties back to normal on the a:
li.item {
font-size: 0;
color: transparent;
}
li.item a {
font-size: 16px;
color: #000;
}
This makes the li text invisible and have no size whatsoever, but keeps the a element styled as it should.
JSFiddle demo.
Note that I've used transparency here as (as far as I recall) Safari has a problem with fully hiding the font when its size is set to 0.
Simply:
.item {
color: transparent;
}
.item a {
color: #000;
}
JS Fiddle demo.
This means that the text of the li is invisible/transparent (though it can still be selected), but the text colour of the a element is made visible.
how do you achieve the effects when you hover the links at top(HOME,ABOUT , JOBS)
which you can see in http://www.webdesignerwall.com/ ,
can someone give me a hint ? or any?
A lot of people here are far too quick to whip out the scripting languages. Tsk, tsk. This is achievable through CSS. I'd even be inclined to say that there is no need for additional mark-up. One could use a background image on the :hover state. Simple.
Each link (#nav li a) contains the nav item text plus an additional span which is set to "display:none" by default. The span also has a set of other styles relating to its position and background-image (which is the text that appears).
On #nav li a:hover the span becomes display:block, which makes it visible at the defined position. No scripting needed.
HTML
<ul id="nav">
<li>Home <span></span></li>
<li>About <span></span></li>
<li>Jobs <span></span></li>
</ul>
CSS:
#nav li a span{display:none}
#nav li a:hover span{display:block}
This is a completely stripped down version of course, you will need to add your own positioning and other styles as appropriate.
There are many, many ways this could be acheived. The simplest would be to have each navigation item change the above image to reflect its corresponding graphic.
<div class="hoverImages">
<img src="blank.jpg" style="display:none;" />
</div>
<ul>
<li class="home">Home</li>
<li class="about">About</li>
<li class="contact">Contact</li>
</ul>
-- jQuery
$("li.home").hover(
function () {
$(".hoverImages img").attr("src", "hoverHome.jpg").show();
},
function () {
$(".hoverImages img").hide();
}
);
The way it's achieved is by using an empty <span>.
It's positioned off screen by default and move into view on hover
Like so:
<ul>
<li>Link<span> </span></li>
<li>Link<span> </span></li>
<li>Link<span> </span></li>
</ul>
And the CSS:
ul li a {
display: relative;
}
ul li a span {
position: absolute;
top: -50px; /* or however much above the a you need it to be */
left: -1000em;
}
ul li a:hover span {
left: 0;
}
It is probably a script on the Home, About and Jobs links that makes a floating div tag visible on mouseover and invisible on mouseout.
Here is a simple code example achieving a similar effect:
<html>
<body>
<a onmouseover="document.getElementById('my-hidden-div').style.display='block'" onmouseout="document.getElementById('my-hidden-div').style.display='none'">Hover Over This</a>
<div style="display:none" id="my-hidden-div">and I appear.</div>
</body>
</html>
Using jQuery you would just do something like
$(#MenuId).hover(function() { // show hidden image},
function() { // hide hidden image});
by the fact that you can rollover the whole area when on rollover i would suggest that it is simply an alternative background that appears on rollover using css. the elements themselves might then be positioned absolutely within the navigation container.
In this particular instance, the developer placed a span tag inside the li elements that make up the menu. That span has (most notably) these properties:
height: 33px;
top: -26px;
left: this varies to position the spans properly
position: absolute;
After that, just some JavaScript to make the span appear/disappear.
A pure CSS solution is explained on Eric Meyer site: Pure CSS Popups 2.