below is my html and css it works perfectly fine
current behavior is when the button is pressed background color is green as expected,
after it is released background color is yellow.
but here i want the background color to be blue (normal state).
i cannot remove :focus because on keyboard tab that should work as expected.
what more selectors i have to use to change the background color of the button to blue after released the mouse..
NOTE:- i don't want Jquery or javascript solution i am expecting only css changes.
button { background-color:blue}
button:focus{background-color:yellow}
button:active{background-color:green}
<button>hello</button>
One idea is to consider an extra wrapper that will get the click instead of the button. The trick is to create a transparent layer above using pseudo element and you will still be able to have the focus using the keyboard.
If you have any click handler attached to the button you need to move it the span instead
button { background-color:blue}
button:focus{background-color:yellow}
span:active button{background-color:green;border-style: inset;}
span {
display:inline-block;
position:relative;
}
span:before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
<span><button>hello</button></span>
Related
I'm trying to code a website and every time I edit the images there's a mouseover effect and I want to have a plain image on the webpage. The image is grayed out and when I mouseover it's not. How can I make it stay normal without having to mouseover? When I click, it opens a link and just opens the same page. SOS.<img src="images/image.jpg" alt="image" class="border2" />
If you have CSS stylesheets they may be causing the difference, use inspect element on it and see what styles are active and click on the :hov then the :hover button next to the filter bar in the styles tab to see how it changes. Then look at the style side with hover activated and see where, if any, there are places with :hover in their selector. Next find the place in your stylesheet where that selector is and copy its contents into the selector without :hover
Example
<button class="btn">Press Me</button>
which would then be styled by both:
.btn {
background-color: white;
}
.btn:hover {
background-color: blue;
}
this would mean that when not hovered the button is white but then becomes blue when you hover over it. A similar thing may be happening to your image with something along the lines of:
.border2 {
background:#ffffff;
opacity: 0.5;
}
.border2:hover {
opacity: 1;
}
found this on Grey out all images other than active hover image
I know that press signal in css is :active, but i still can't find a proper way to make a toggle switch for the link.
For example, <a> has the color blue, when <a> will be pressed first time, it's color should be red, when it is pressed second time, it's color should blue again. So basically first press is a toggle switch from blue to red, and second is vice versa.
I have used :target action which didn't seem to work out:
a {
color: blue;
}
a:active {
color: red;
}
a:target {
color: red;
}
How could this be possible without use of JS? So i could toggle switch the link color to red on the first click, and then blue again at the second.
You can do it via checkboxes and labels.
HTML:
<input type="checkbox" id="t1" class="toggle">
<label for="t1">Link with toggling color</label>
CSS:
.toggle {
position: absolute;
left: -99em;
}
.toggle:not(:checked) + a {
color: blue;
}
.toggle:checked + a {
color: red;
}
Working example here.
This is not possible to achieve without JS. Links are not designed to be toggle elements, and CSS has nothing to track multiple clicks on an element (it is either being clicked or is not).
If you want to represent a toggle, then look at checkbox inputs instead. They have a :checked pseudo-class.
There is one way you could (sort of) achieve this purely with CSS but it would mean that, in its initial state the link would actually be unclickable, which probably wouldn't be desirable.
The trick is to set the pointer-events of the anchor tag to none, wrap it in another element with a tabindex attribute (to allow it to gain focus) and then, when the wrapping element receives focus, change the colour of the anchor and reset its pointer-events. On the next click, the link will receive focus but this will remove the focus from the wrapping element, which will revert the anchor's styles back to their initial state.
*{color:#000;font-family:sans-serif;outline:0;}
a{
color:#00f;
pointer-events:none;
}
span:focus>a{
color:#f00;
pointer-events:initial;
}
<span tabindex="-1">link</span>
I have 3 Divs "button","enableButton" and a "tooltip" in my page. I have set display:none for the "button" by default.
The display property of "button" will change to block on clicking the "enableButton" div.
I have some CSS definition that making the tooltip div's display block on mouse over the button. I used adjacent selector (+) with :hover pseudo selector to make the adjacent "tooltip" div visible.
My problems is the tooltip is not showing on mouse over the button in chrome. It is working correctly in firefox. Can anybody help on this?. Thanks in advance.
HTML:
<div id="enableButton">Click to Enable Button</div>
<br/>
<div style="display:none;" id="button">Button</div>
<div class="tooltip">this is the tooltip</div>
CSS:
#enableButton{cursor:pointer; color:red;}
.tooltip{display:none; padding:5px; border:1px solid #ccc;}
#button{cursor:pointer;}
#button:hover+.tooltip{display:block;}
Javascript:
$("#enableButton").click(function(){
$("#button").show();
});
The code is in this fiddle
Click the Click to Enable Button to make the button visible first and mouse over the button to get the issue
On firefox the tooltip is showing correctly
I'm afraid I dont have an explanation, but I do have a fix.
Demo Fiddle
Add the CSS:
#button {
cursor:pointer;
height:0;
width:0;
overflow:hidden;
}
#button.enabled {
height:auto;
width:auto;
overflow:auto;
}
Then change your jQuery to:
$("#enableButton").click(function () {
$("#button").toggleClass('enabled');
});
Setting:
height:0;
width:0;
overflow:hidden;
Mimics the effect of display:none; which seems to be causing the issue in Chrome. The enabled class then resets these to their default values, causing the button to show when the class is applied.
I have done box around text. Now I want to be hover and change the color of the box
background. I am not able to change that when mouse hover. I have also attached the
image with this so you can have idea about. I have done box around text. Now I want to
be hover and change the color of the box background. I am not able to change that
when mouse hover. I have also attached the image with this so you can have idea
about.please check the image and found the social media box , when I hover the mouse
the hover color is not changing.
<style>
div.ex
{
width:20px;
height:20px;
padding:5px;
border:1px solid #D8D8D8;
margin:0px;
background-color:#3b5998;
}
</style>
<div class="ex"><span class="iconfacebook2" aria-hidden="true" data-icon="">
</span></div>
*edited to make the image appear
You can use the :hover selector:
http://www.w3schools.com/cssref/sel_hover.asp
But if you are using images, you can apply CSS Image Sprites:
http://www.w3schools.com/css/css_image_sprites.asp
By the way, if you are developing a website, maybe CSS Image Sprites are a good choice to boost the performance of the website (because it uses only 1 native image for multiple image interactions).
;)
<style>
div.ex
{
width:20px;
height:20px;
padding:5px;
border:1px solid #D8D8D8;
margin:0px;
background-color:#3b5998;
}
div.ex:hover {
background-color:#000;
}
</style>
Create a hover element by taking the same css class div.ex and adding :hover
How Would I make it so that when I click a button, the button stays that color until another button is clicked?
To clarify, imagine you have a text box. When you click it, you can add a border because you have it like input:focus{border:#000} and when the input loses focus or another text box is clicked, the border properties go back to the default.
How would I accomplish this with a button. I feel like I'd need to use :after or something.
My Code
button.top_bar {
background-color:#E3E3E3;
border:#DCDCDC 1px solid;
border-radius:3px;
height:40px;
display:block;
color:#000;
postion:relative;
display:block;
float:left;
top:5;
text-transform:capitalize;
font-family:Arial;
font-weight:bold;
cursor:pointer;
margin-left:15px;
}
button.top_bar:hover {
border:#9F9F9F 1px solid;
}
button.top_bar:focus {
border:#9F9F9F 1px solid;
}
The only way I can think of doing this is with jQuery, or some sort of Javascript. Here's how I would do it: I would control it via a class (let's call it ".selectedBorder"). Then on click, grab all your buttons that you have, and turn off the borders for all of them, then just add it on the clicked one. Here's an example:
//first you grab the click event for the button(s)
$("#buttons").click(function(){
//we remove all the borders from all the buttons
$("#buttons").removeClass("selectedBorder");
//Now we add the border to the button that's been clicked
$(this).addClass("selectedBorder");
});
That should do the trick. Just add that in a javascript tag or an external file and include it, and you should be good to go. Hope that helps.
Unlike text inputs, some browsers don't seem to grant focus when button elements are clicked. Add to your button element an attribute onclick="this.focus()" to force the issue. No jQuery needed :-)