Within Twitter Bootstrap there is a selection of buttons that one can choose from (as seen here: http://twitter.github.com/bootstrap/components.html). For our project, we opted to use a yellow color that was not included in the default set. A simple matter to simply create a new css class which included the colors I wanted. However, when the button is pressed in, the background color returns to the default grey background color instead of a like-background color as is seen with the other buttons on click. Did I miss something during the creation of the button?
example of issue (taken in FF):
You need to specify your new color with the :active pseudo selector. When you press a button it gets "active" and the :active selector kicks into play. When you release the mouse button the element stops being active and the element style reverts back to normal. Sort of like the :hover pseudo selector, when you're hovering the pointer over something.
i found this question via google.
recommend a article,must do some help
http://rubysource.com/how-to-customize-twitter-bootstrap%E2%80%99s-design-in-a-rails-app/
Related
I need to style an icon button with 3 different border colors, one for regular state, one for on hover, and another one for when the icon is clicked. I am using react, and right now I have a function that checks if the current button is the one that is selected and that works for regular and on clicked, I also added the onHover color but if that button is the on that is active you can't tell because on hover takes over, you can't see the clicked border until you move the mouse away. How to go about this?
you need 3 style declarations
.button {}
.button:hover {}
.button.selected{}
If you write them in exactly this order, then the button's selected style won't overridden by hover as the declaration for selected comes after declaration for :hover state and won't be overridden by it.
It's tough to tell without seeing your code, but it seems like you want both borders for active and hover states to show at the same time.
Since you can only have one border on an element at a time, one state will always overwrite the other.
There are some effects you can use with other CSS properties so that users can tell when a button is both active and being hovered:
outline - outline is similar to border and the two can exist at the same time (outline will probably only work if the buttons are rectangular because it doesn't adhere to border-radius)
box-shadow - this could be an easy way to add a hover effect underneath the element and its border
pseudo-element - This one is more complicated but adds the most flexibility - perhaps adding a ::before or ::after element to the button, positioning it absolute behind the element, and have that behave separately based on whether the button is active or hovered.
I usually use CSS's :hover feature along with the framework (e.g. react)... there are some good examples online where this feature doesn't just change color, but present some type of animation to help the link/button stand out:
https://www.proglobalbusinesssolutions.com/css-hover-effects/#:~:text=A%20CSS%20hover%20effect%20causes%20a%20graphical%20interface,on%20the%20web%20page%20and%20improve%20site%20interactivity
You might also consider this answer: How can I access a hover state in reactjs?
I am currently using a Bootstrap 4.1 button with the class being .btn-outline-primary. In its regular state, the button has a white background with blue text. However, when you hover over the button, the colors are inverted such that the background is blue and the text is white.
The active state of this button is only a highlighted border (with button styling the same as inactive state - white background blue text) and I would like to make it so that when the button is clicked, the button remains in the same style as when the button is hovered.
However, I do not have access to the hover class of the button since it is a bootstrap button and I am wondering how I can achieve this? Here is the button:
<button class='btn btn-outline-primary max-w-250 mx-1 my-1' type='button' id='MyButton' name='happyButton'>
<div class='d-flex flex-column justify-content-center align-items-center overflow-none'>
<div class='ButtonText line-height-16'>"Text Line One"</div>
</div>
</button>
I have tried using css styling using :focus to change the background color, however, this just over-powers the text since the text does not invert and the background now matches the text color.
.btn-outline-primary:focus{
background-color: #18f;
}
I'm not a huge Bootstrap user or I'd look up the relevant classes for you. Instead, I'll walk you through the steps to find them yourself using DevTools. I'll be using Chrome, but the steps are similar for Firefox and Safari.
In a browser (again, preferably Chrome) where the button is rendered, right click on that button. From the menu, select Inspect.
The box that comes up should be on an elements tab, displaying your html. Confirm that the button is highlighted in that display. If it isn't, click on the button's html to highlight it.
The right side of the newly opened box should be a pane describing the selected element, and should be on the Styles tab. Confirm that the css rules that you'd expect to apply to the button are there.
Near the top of that pane, next to the filter box, there is a small button labeled :hov. Clicking that button displays the various pseudoclasses, like :hover, that can be applied to your element. Check the :hover checkbox.
The :hover rules should now display in the css rules list below. Find the relevant declaration (.btn-outline-primary:focus or something similar) and copy the rules it contains. You can then, in your own css, write
.btn-outline-primary:active {
[whatever rules you copied]
}
I have two addenda:
If that doesn't work, go through the first four steps again, this time selecting the :active pseudoclass. If the rules you added are showing up in your rules list (they may be way down!) but aren't working, you have an issue with css specificity and should look that up
I have written this assuming that, when talking about an active button, you were using the term in the technical css sense, which is a change that only lasts so long as the button is held down. If you want the button to change permanently after it is clicked, you will need to use something outside of css: either use some Javascript to update the classes on the button or change it up and use a checkbox
I am trying to color the link in the menu of the page i am on.
I thought it war a:active but that only colors in while clicking it and holding the mousebutton.
How do i color the link of the page that i am currently on?
Thanks in advance
You'll need to put a class on it, such as class='current', and use that in your CSS. :active doesn't mean current page.
https://developer.mozilla.org/en-US/docs/Web/CSS/%3Aactive
"The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button and ends when it is released."
You can't with Css selector. But on the server side (php, .net ...) you can add a active class on the current link in your view
how I can set input status checked on hover only via Css?
Actually is the setting on click but i need it on hover, how I can do that?
here is the example
Well not possible...with css you can't create a environment in which radio input be checked on hover because in css you can style the elements but you cannot fire any event.
You have to use little JS to achieve it.
Here is the code
$('input').on('hover', function(){
$(this).trigger('click');
});
Above code will trigger click on hover of same element.
When I'm debugging a site, sometimes the hovered selectors are a little long winded and similar to other ones, is there a way to apply a kind of "sticky" state to hover rules in Firebug?
Example; I hover over a nav bar and want to copy the selector out of firebug to search in the CSS, but as soon as I move my mouse, the selector (obviously) disappears as the nav <li> isn't hovered anymore.
Any way to do this?
Thanks :)
When inspecting links, Firebug shows the default CSS state, i.e. styles applied to a:link. By default, the :hover and :active styles are not shown. Fortunately, you can change the state of the link by clicking Style and choosing the appropriate option:
For what I wanted, there's an option for it in the Style dropdown above the CSS styles for the element. Just click the dropdown, and select :active or :hover and it keeps the styles for the selected and hovered element :)
Sometimes items are not affected by the ":hover" state but by a mouseover in jQuery or similar, in that case you can manualy trigger the event (or force the event) in the console tab by writing:
$('#a-random-selector').mouseover()
Hope it helps, I came here looking for this answer but had to figure it out myself
You can try using Chrome inspector, and trigger :active :visited state etc.. on the element under styles.
Open both firebug and web developer->Inspector. In the Inspector window, locate the code line where the hover starts, right click the mouse and choose the :hover. Then the hover state will stay, you can do whatever you want in firebug.