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.
Related
I have a menu which I want to be shown when I click a button and disappeared when I click one more time, I want to do it only with CSS is it possible ?? how ??
Also, I want to know if is it possible to add or delete a class from an element when it is clicked or add a class to another element when an element is clicked ??? and I want to do all of these only with CSS
For the menu, use a checkbox for the button. A checkbox holds state inside of the checked property. You can hide a checkbox behind something to make it look like something else. You can then use this in the selector to apply styling;
input:checked {
}
You cannot add or remove classes using CSS only. Use JavaScript to do this.
Looking at this example:
https://www.w3schools.com/howto/howto_css_subnav.asp
I would like to make the submenu disappear on click without using Javascript. Is this possible?
It can be made to appear on hover without JS. The idea would be to hide the submenu once a submenu item is clicked. For example:
If you click "Package" the entire submenu and red background should not be shown.
EDIT 1:
I should add that I experimented using :has and :target in various combinations to set change it to display: none. That did not work.
I think that technically the answer to your question is yes, it is possible, but actually no - at least not in a way your page will continue functioning normally afterwards. Let me explain:
If you were to use anchor elements for our subnav links/buttons you could use a combination of the the :visited and :has pseudo classes to set the submenu's display to none (display: none;) and the main menu's color to the original color. However, I believe this will mean you won't be able to make the submenu appear again unless you were to somehow cancel the "visited" status of the anchor element that was clicked which if possible, will most certainly include the use of JS anyway...
I am using upload image file button from element ui which is shown in
this link.
However, I need to change color of button from blue to green same as another button which is shown in below picture.
Can you help me to edit style of the button?
Kind regards
Change it to:
<el-button type="success">Click to upload</el-button>
And also look at the documentation
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/
I'm trying to apply a theme to my buttons (input type="button", input type="submit" and button) , but I haven't been able to get it to work, at least not in all of them, just in one, the "Add" button. According to this page, the only markup I need to apply a theme to a button , is simply this <button>Button Label</button>. , but it just doesn't work.
I added a working demo on JSFiddle
I really hope you can help me out with this
You need to apply the button() function for each <button> or <input> that you want styled as a button. You could add the following to your code:
$("button, input:submit, input:button").button();
Which would apply the jQueryUI button styles to all button elements and input elements of type button or submit.
I updated your example: http://jsfiddle.net/hjYyb/