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.
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.
On my website I have a global CSS rule for hyperlinks:
a {
color: #1F497D;
text-decoration: none;
}
a:hover {
color: #FFFFFF;
background-color: #1F497D;
}
This works well for text-only hyperlinks - the link gets a background colour applied to it on hover.
Contact Us
However this is causing issues with other link types, for example:
<a href="image.png">
<img src="thumb.png" alt="" />
</a>
In the above example, the image is a transparent PNG, therefore the background colour applied by the a:hover rule can be seen on hover.
Is there any way we can adjust the global CSS rule so that it only applies to text links? I know I can add a separate class for these links but as there are so many I would prefer an easier solution.
You could create a class to anchor tags that are not texts:
a.not-a-text:hover {
background-color: transparent;
}
Them in the HTML:
<a class="not-a-text" href="image.png">
<img src="thumb.png" alt="" />
</a>
Since you asked for an "easier" solution (rather than adding classes), you could apply a style using an attribute selector (where a elements have an href attribute that end with a png extension) to have a transparent background.
Something like this:
a[href$=".png"]:hover{
background-color: transparent;
}
Here's a fiddle (has a red hover which you could set to transparent):
http://jsfiddle.net/sb6xvztm/
You should use CSS classes on the links instead of tags because it will make maintenance much easier.
.text-link {
color: #1f497d;
text-decoration: none;
}
.text-link:hover {
color: #FFFFFF;
background-color: #1F497D;
}
<a class="text-link" href="contact.html">Contact</a>
<a class="img-link"><img src="someimage.jpg" alt="alt"></a>
If you are not against your site running jQuery I suggest this SIMPLE solution:
jQuery('a').hover(function(){
jQuery(this).has('img').css('background', 'none');
});
Working Example Here http://jsfiddle.net/a9h9wbnv/
I would definitely use a new class. Then, just use any decent text editor (like Notepad++) to find and replace:
FIND: <a href="*"> <img
REPLACE: <a class="image-link" href="*"> <img
And in your CSS:
a.image-link:hover {
background-color: transparent;
}
So you want only the text hyperlink to have the hover?
If so, you can simply give the the 'Contact Us' a different class name or a specific ID.
<a href="image.png">
<img src="thumb.png" alt="" />
</a>
<a id = "contact" href="contact.html">Contact Us</a>
a {
color: #1F497D;
text-decoration: none;
}
#contact:hover {
color: #FFFFFF;
background-color: #1F497D;
}
I have the following markup:
<a href="#" title="Feedback" id="feedbacktogglenav">
Feedback
<i class="icon-comment"></i>
</a>
On hover, I would like the text to be underlined but not the font-awesome icon. I know you can do "text-decoration:none" on the icon (which works) but when you hover on the text part it still adds the underline to the icon. Any ideas?
http://jsfiddle.net/ZZEQd/
I've discovered a way of doing this without needing an extra span tag, it works in every browser I've tried it in (FF/Chrome/Safari/Opera)... except IE8 (I haven't tested in IE 9 or 10 either).
Just declare the icon as display:inline-block, no more underline on hover.
Example: http://jsfiddle.net/J432G/
HTML:
<a href="#" title="Feedback" id="feedbacktogglenav">
Feedback<i class="icon-comment"></i>
</a>
CSS:
a{
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
i:after{
content: '{icon}';
display: inline-block;
padding-left: 1em;
}
...but when you hover on the text part it still adds the underline to the icon. Any ideas?
To get this to work you'd need to contain the link text within a separate element (a span, ideally):
<a href="#">
<span>Feedback</span>
<i class="icon-comment"></i>
</a>
Now you can remove the text-decoration from the link completely and assign it only to the span (on hover):
a {
text-decoration:none;
}
a:hover span {
text-decoration:underline;
}
JSFiddle demo.
The only way to do this reliably is to assign text-decoration:none to the first parent element i.e the initial a tag.
If you cannot add a span element (let's assume you just have acccess to CSS), it should work withfloat:left or right on your icon element.
See: CSS linked images are being underlined ("a" display is set to block)
Someone just responded but deleted their response. The solution was:
#utilitynav a i {text-decoration:none;}
Thank you mystery person!
http://jsfiddle.net/ZZEQd/2/
Just add a span tag in your HTML and you should fine.
HTML:
<a href="#" title="Feedback" id="feedbacktogglenav">
<span class="linkHover">Feedback</span>
<i class="icon-comment"></i>
</a>
CSS
a {
text-decoration:none;
}
.linkHover:hover{
text-decoration: underline;
}
#utilitynav .icon-comment {
font-size: 12px;
margin-left: 3px;
position: absolute;
top: 2px;
}
#utilitynav .icon-comment:hover {
text-decoration:none;
}
#utilitynav #feedbacktogglenav {
margin-right: 12px;
}
I added a class to your span for it wouldn't effect future span tags
If you have a situation where you can't use :before or :after (because the specific icon is set by the content, not by the global style, for example) and you also don't want to have to go in and put <span> around the link text everywhere... one other option is to put padding on the link, and absolutely position the icon over the padding.
HTML
Feedback <i class="icon-comment fas fa-link"></i>
CSS
a {
position: relative;
text-decoration:none;
padding-left: 20px;
}
a:hover {
text-decoration:underline;
}
a i {
position: absolute;
left: 0;
}
JSFiddle: http://jsfiddle.net/w6bL5m8k/1/
I'm sure there are probably all kinds of special conditions under which this isn't going to work out... but for simple situations it should be fine.
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>