I want the first of the two < i > elements to be shown when not hovering and the other one to be hidden, and when hovering I want the other way around. Is that possible with CSS or do I need to use JS?
<a class="btn btn-like postb2" href="#">
<i class="sprite-io sprite-like-grey"></i>
<i class="sprite-io sprite-like-white"></i>
3
</a>
.postb2 .sprite-like-grey,
.postb2:hover .sprite-like-white {
display: none;
}
.postb2:hover .sprite-like-grey {
display: inline;
}
Demo
You can change it to suit your HTML (btw. I don't see three i in your code)
I think I have an idea of what you want, and it is in fact feasible in CSS alone.
If you want to show a different sprite when hovering the anchor-tag, I would go about creating the markup a bit differently.
<a class="btn btn-like postb2" href="#">
<i class="sprite-io sprite-like"></i>
3
</a>
Instead of switching between two HTML-nodes, you would probably just want to change the coordinates of what to show in your CSS-sprite:
.postb2 .sprite-like{
background-position: -80px -80px; // just some arbitrary coordinates for example purposes
}
.postb2:hover .sprite-like{
background-position: -160px -160px;
}
Another note:
I see that you're using the names "sprite-like-grey" and "sprite-like-white". I would avoid naming my css-rules after how they appear at a certain point, and rather name them after what they actual are or perform in the application.
Know that's there is already the best answer for your case, but there's something I just discover about your question and Mr_Green comment which might be usefull.
You can indeed target sibling elems in CSS with combinators using + if the elems are next to each others or ~ if no (they need to be in the same parent).
Little Fiddle to show
More info on W3C Website
Related
I'm trying to make buttons with icons. For the icons I want to use the <i> tag. For example, if I want a button with a star icon at the beginning I want to write something in sort of:
<a class="button" href="#"><i class="star"></i><span>Button</span></a>
The problem is that my by button could be without an icon. Is there any way in Sass to check this? If no, what is the best way to do it?
Thank you.
If you need to give a different style to the link, maybe you could avoid to use extra markup for styling purpose (it's a bad practice) and assign the class (e.g. star) to the link
<a class="button star" href="#"><span>Button</span></a>
and put the icon as content of a pseudoelement, e.g.
.button.star:before {
content: url(...) // or some iconic font (e.g. fontello)
}
doing so you can have a different style for button with and without icon.
The answer of Fabrizio is the best option but if you really want to go with the extra markup route, you could use a span instead of an and nest the label span inside it :
<a class="button" href="#"><span class="star"><span>Button</span></span></a>
And adapt the CSS
.button .star {
// Icon styles
}
.button span span {
// Styles for the link when an icon is present
}
I'm creating a site with a horizontal navbar in which the buttons are designed as elements, making them easy to differentiate, and they individually light up when you a:hover over them. Here's a link: http://allpropestmanagement.net/commercial2.html
Obviously not a finished product.
My current problem involves that big purple field on the far right of the navbar, the one that's not a button. That too is an element, but with hover disabled and a whole load of nonbreaking spaces to pad it. That's the problem. I would like that purple field to extend all the way to the right end (with a tiny margin, like it does on the left side). The trouble with nbsp, as you can imagine, is that there's a finite number of them, and they don't scale. So if the navbar is the perfect length on my computer with, say, 16 nbsps, on someone else's machine it won't reach all the way and on yet another person's it will reach too far.
The html looks like this:
<div id="navmenu">
<form>
Home
Commercial
Meet The Pro
Contact
<a id="farright" style="border-top-right-radius:25px;">
<i> "We'll get the job done right!"
</i></a>
</form>
</div>
I feel odd saying this, but the css is kind of bulky and I'm having trouble formatting this post. Perhaps I'll add it in a few minutes once this post is visible, but the css file is "smithmicropurple.css".
Anyway, I would like a way to stretch that element so it always fits correctly, or if not, some other method that achieves the same effect. I have already tried setting widths individually for each element and that doesn't appear to work.
I like to do these types of things to "help" others (rarely, if I'm lucky), but also to help me learn more about html/css.
So I've given it the old college try with this FIDDLE.
HTML
<div class='holderdiv'>
<a href='#'>One</a>
<a href='#'>Two</a>
<a href='#'>Three</a>
<a href='#'>Four</a>
<a href='#'>We'll Get the Job Done Right!</a>
</div>
I won't post the CSS because it's pretty long. It's in the fiddle.
Please don't consider this a "real" answer. Perhaps just something to think about.
Semantically, I am not sure why the parent is a form element, i'd suggest changing that to a HTML5 <nav> element. (assuming you're using HTML5, of course)
The approach taken here is to set the child elements to display:table-cell, and give the targeted element, #farright a width of 100% to fill the remaining space. Also, text-align:center will effectively center all the child elements. No need for %nbsp;
#navmenu {
font-size: 14pt;
margin: 5px 0 0 5px;
}
#navmenu form {
width: 940px;
}
#navmenu form > a {
display: table-cell;
white-space: nowrap;
text-align:center;
}
#navmenu #farright {
width:100%;
}
I have a button that, when hovered over, I would like the background image to display also. (It is an arrow an explanation of the button). There are quite a few questions similar, but I couldn't quite tweak the answers to work for me.
The HTML looks like
<div id="header_feedback">
<a href="#contactForm">
<img title="Add an Event" src="./img/header_feedback.png" alt="Give us your Feedback"/>
</a>
</div>
the CSS then is
#header_feedback
{margin-left:730px;
margin-top:-135px;
position:absolute;}
#header_feedback:hover
{
background: url ('./img/addevent_tip.png');
}
Any ideas hugely welcome!
The main problem here is not with your CSS. Itagi's answer correctly identified the minor issue that you can't have a space between url and the parens/address.
But there are two other bigger issues:
Invalid image url: when applied, background: url('./img/addevent_tip.png'); fails to find a valid image. To fix this, you either need two periods or zero. So either background: url('/img/addevent_tip.png'); or background: url('../img/addevent_tip.png');
Backgrounds applied to opaque images aren't visible: Since the entire content of the div is an image and that image has no transparency, you will not be able to see the on-hover change even when it happens correctly. You can adjust for this by making part of the image transparent (and, perhaps, setting a background for the non-hover state that leads it to look the way it normally does), or by abandoning the image in favor of CSS spriting.
you just need to change it the following way:
#header_feedback:hover
{
background: url('./img/addevent_tip.png');
}
no whitespace between 'url' and the actual url
#header_feedback a img{ display:none;}
#header_feedback a:hover img{display:block}
It's an easy question and I've done it several times before, but for some reason, it's not working this time. I have an image and when a user hovers it, a description should show.
HTML:
<div class="description custom">
<a class="description_help_text" href="">
<img src="../../misc/help.png">
<span>Bla bla bla.</span>
</a>
</div>
CSS:
div.description a.description_help_text span {
display: none;
}
div.description a.description_help_text a:hover span {
display: block;
}
But for some reason, it's not working. I'm guessing some kind of stupid syntax I'm overlooking right now.
And a second question, is it possible to use a a-tag without linking it? So a user can click on it as much as he wants, but with no actions from the browser?
I think the latter CSS block should be
div.description a.description_help_text:hover span {
display: block;
}
For the links without action I recommend using
link
Your CSS should work fine, so my guess is that you have a parent class somewhere which is affecting it. Try looking through the ascendent styles in Firebug.
Re. your second question, you can supply no href value to an anchor element, but this may still cause the page to jump when the link is clicked, and IIRC it is not valid HTML. An alternative is to link to javascript:void(0);, although this is rather ugly IMO.
The only way to fully prevent any link behaviour is to create a link handler for the element in javascript and place event.preventDefault(); within it.
This seems to work for me: http://jsfiddle.net/qVK6f/
to answer your second question at least, try:
click
I have some navigation elements constructed like so
<div id="topnavcontainer">
<a href='/web/link1.html' >link1</a>
<a href='/web/link2.html' >link2</a>
<a href='/web/link3.html' class='current'>link3</a>
</div>
The CSS for #topnavcontainer a.current specifies a gradient and uses DXImageTransform so that IE can render the gradient too.
It does, however, only seem to work if I set #topnavcontainer a.current to display: block which ruins the way the navigation works.
Does anyone know any work arounds?
Yes: for filters to work, your element must have layout. There are a number of ways to do this via CSS (outlined in the linked document). One way (which is not valid CSS but will work) is
zoom: 1;
Another that is valid CSS but may affect formatting. is
display: inline-block;