I'm doing an image button rollover that has 3 stages (normal, hover, active).
I have the normal and hover stages working, however I can't seem to get the 'active' to work. That is, I want the image to stay on the active lever after it has been clicked.
Here is what I have:
http://jsfiddle.net/pufamuf/Q3YpU/1/
Thanks! :))
What you're trying to do will require JavaScript. Your CSS is fine, but when the link is no longer active, the :active selector no longer applies, and there's not much you can do about that.
You could (for example) use JavaScript to respond to the click event by adding an extra CSS class to the tag, and use that class to style the link identically to your :active link. For example, if your JS adds the class "clicked", your rule might look like
#emailUs:active, #emailUs.clicked
{
background-position: 0 -62px;
}
Many (most?) developers would probably use jQuery for something like this.
The :active pseudo-class only applies while the element is in the process of becoming activated. Once the mouse click is released the element no longer falls under the :active category.
In order to produce your expected behavior you will need to use some Javascript.
Use jQuery addClass on click event
If you could use JavaScript, this would be simple. Come up with some class name (e.g., active), and add it to your :active declaration:
#emailUs:active, .active
{
background-position: 0 -62px;
}
Then use JavaScript to listen for the click event on that link, prevent the default action, and add/remove the active class from the element as necessary.
However, if JavaScript isn't allowed, there's a much messier way to get what you want, which probably won't be feasible on a live site.
Change the link's href so that it points to itself:
<a id="emailUs" href="#emailUs" title="Email Us"></a>
Then use the :target selector in your CSS:
#emailUs:active, #emailUs:target
{
background-position: 0 -62px;
}
Keep in mind that the second solution has some caveats that go with it:
It tries to reposition the page so that the link is at the top of the screen
There could be a bunch of issues if you're already using the fragment identifier on your site
It won't work at all in IE6-8
Related
I'm trying to change the class name of my header when I hover over it. The class name when NOT hovering is ".l-header.pos_fixed.bg_transparent.shadow_wide", but I'd like to rename it when hovering to ".l-header.pos_fixed.bg_solid.shadow_wide".
Is this possible?
EDIT: Maybe a bit more background information: I want to change the header of https://pinkypromise.pictures to the header of, for example, https://pinkypromise.pictures/contact when hovering on the home page.
To answer your question, yes, it is possible to change class names based on events (hover, in this case), but you will need javascript for that. You can't achieve this with pure css.
As others have mentioned, it is usually a better approach to have a css rule with the :hover pseudo-class. But also be aware that you might have problems with the intended result in touch devices.
A good source of information for these rules is Mozilla Developer Network. Please have a look at the full documentation for :hover's pseudo class on MDN.
Sorry I thought only the logo should change.
I see you site is using jQuery.
When I enter this in the console it seems to work fine:
jQuery('.l-header.pos_fixed.bg_transparent.shadow_wide').mouseenter(function() {
jQuery(this).removeClass('bg_transparent').addClass('bg_solid');
}).mouseleave(function() {
jQuery(this).addClass('bg_transparent').removeClass('bg_solid');
});
You don't need to change the class name on hover, just specify the styles that you want to apply when you hover:
header:hover {
// place the styles that make the background solid here
}
I am using Social Buttons for Bootstrap to add social buttons on my web site. The file is basically a CSS, which is using Font Awesome and has around 20+ classes defined for various social networks.
Buttons, defined with Bootstrap Social have hover and active effects.
What I want to do is disable hover/active effect, so the buttons would become static, i.e. without any hover/click functionality.
Ideally, I'd like to have some CSS class, say "btn-static", which would cancel style changes coming from hover/active effects.
Is this even possible?
I would like to avoid creating separate CSS class for every social network, or modifying original CSS file. Hoping to add custom class which could cancel hover/active events.
For example, here is the button defined:
<span class="btn btn-social btn-facebook">
<span class="fa fa-facebook"></span>Facebook
</span>
I have tried using:
.btn-static:active, .btn-static:hover { background-color: none; }
and
.btn-static:active, .btn-static:hover { background-color: inherit; }
But that just makes the button have transparent background. I want it to keep original color. Is it somehow possible to reference the original color in CSS?
UPDATE #1: JSFiddler is available
This is a hack:
.btn-static {
pointer-events: none;
}
According to Can I Use, it is well supported. Take a look at the known issues tab on that page, as this won't scale to many other uses.
Ideally, use a more specific selector. For example:
#IDofYourFooter .btn:active, #IDofYourFooter .btn:hover, #IDofYourFooter .btn:focus {
background-color: [whatever] !important;
}
If you genuinely cannot come up with a more specific selector, then use !important to override CSS that is inline or coming from a third-party source that appears after your styles:
.btn:active, .btn:hover, .btn:focus {
background-color: [whatever] !important;
}
See that I added a :focus selector in there. Also, using !important almost always creates maintenance issues down the road.
Please note that changing styles does not disable links, it just obfuscates them. Make sure these do not live in an <a href…>, though if you do that you have no reason to write these styles. If the hover styles are applied outside of an <a href…>, then the original source did a poor job or there is script clickability added.
Is there a way - or anyone knows if someone already made this available - a way to style links in the form of buttons in the aristo style?
http://aristocss.com/
Using this CSS -reform a regular link to the style of a button?
You can more than likely copy all the CSS for those buttons and just use it on a link. In fact you'd probably be able to rip out a bunch of reset stuff as buttons often have all sorts of browser defaults which a link doesn't have.
So change:
button {
// Cut
}
to:
a {
// Paste
}
Hope that helps :)
(The css you need by the way starts right at the top of this file: http://aristocss.com/css/aristo.css)
Sure - just grab the CSS they're already using, change it from button to a.btn, add display:block, give your link a class of "btn" and you're all set.
I'm using Zend Framework and I have a form input button with a style that I defined.
I need to replace the main data-theme once the button gets pressed.
I have in mind something like this:
$this->form->go->setAttrib("onclick", "this.data-theme='new_theme'");
.. but is not working.
any ideas??
thanks!
It depends if you mean 'on press' or 'after'; if on press, then the :active psuedoclass (as Simone states) is correct; if you want the different style to be persistent after you've clicked the button, then the :visited psuedoclass should work (although having said this, I'm not sure if :visited is only valid for a href links; if so, you could style a link to look like a button, which is fairly common)
You could just declare the new style in your stylesheet, with the :active pseudoclass.
Should be something like
input[type=button]:active {
/* type here your rules, i.e. background-color:red; */
}
Hope it helps!
I am using the jQuery UI library out of the box, based on a theme.
Having links rendered as buttons is great, however I need to override some buttons with different colours.
How do I specify an specific class for a particular button to use?
I recommend looking at the CSS for the jQuery UI buttons and duplicating the structure of the CSS which specifies the buttons, but with your own class instead of the jQuery UI classes. Make the overrides that you need in this CSS and include it after the jQuery UI CSS. CSS uses a combination of the most specific selector and ordering to determine which values to apply. By doing this you will make sure that you have the same specificity for each of the CSS selectors used by jQuery so that your CSS takes precedence based on order.
Smashing Magazine has an article that probably has more information than you care to know about the specificity issue.
You can also:
Use Developer Tools in the browser (Chrome has great ones).
See what class from jQuery UI defines the button color.
Override it in your CSS file with the "!important" attribute.
For example, when I needed to override jQuery UI spinner control and remove the borders, I found the class that defines the borders using Chrome Dev Tools. Then in CSS: I added something like that:
.<jquery-ui-class-that-i-found> { border: 0px !important; }
Works great!
I would say, give the particular button or buttons an id, and:
$("#buttonId").removeClass().addClass("myClass");
If you want to apply it to multiple buttons each with its own id:
$("#buttonId, #anotherButton").removeClass().addClass("myClass");
I think the button API should include a configuration like this where you can change color etc. by passing parameters
$("button").button({background:"FFFFFF",hover:"FFFFF"});
this is just an idea where you can change some of its visual attributes.
I found this worked for me:
$(".btnSave").removeClass("ui-state-default").addClass("SaveButtonStyling");
Basically needed to remove the ui-state-default class and then add my own for the background colour etc.
Thsi meant that the rounded corner class etc stayed put and I was able to amend the background colour etc.
If you simply wish to have some additional/different for particular buttons, simply give the buttons some classes like class="mybuttonclass otherbuttonclass" - multiple classes are allowed. Then, just add css rules for your class(es)
.mybuttonclass
{
background-color: red;
}
.otherbuttonclass
{
color:white;
}
thus the background is red with white text - or whatever combination you wish, which would override items in the cascade (CSS) above it. (assumption is that your .CSS file is linked in AFTER the jquery UI css file, or is in-line on the page, both of which would override the jQuery UI css.