Develop Reference

Remove unwanted hover effect [duplicate]

This question already has answers here:
CSS hover border makes elements adjust slightly
(14 answers)
Closed 7 years ago.
I currently have an hover effect written in CSS:
h2:hover{
background-color: #FFE4B5;
border-bottom: 1px solid #888;
border-top: 1px solid #888;
cursor: pointer;
}
But i noticed that when i hover each of the menu options, the text would move slightly up and then down. I didn't add anything that would cause this? I don't think.. How can i fix this and make them stay in place when hovering?
JSfiddle here

It's the border that's being added and removed that's causing this issue.
Two options: add box-sizing: border-box to the item or add transparent borders to the non-hovered elements.
Example box-sizing:
h2 {
box-sizing: border-box;
}
Example border:
h2 {
border-top: transparent 1px solid;
border-bottom: transparent 1px solid;
}

The movement comes from the border being added and removed on hover. An easy fix is to give the h2 element a transparent border of the same width when it's not being hovered:
h2{
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
}

Colors shown differently in different browsers

I have a input text box of #c7e296 color and when in focus then color changes to #668933 but when I test this in different browser they show some different colors on focus.
Can someone explain why?
Below is my code,
.after input[type="text"]:focus {
border: 2px solid #668933;
}
.before input[type="text"] {
border: 2px solid #c7e296;
color: #000000;
font-size: 1em;
}

Some browsers (notably Safari) do a highlight around a focussed input field themselves. So if you set a border, and the browser does its highlight, the colors can bleed together.
You can disable that by putting outline-width: 0 on your :focus rule(s):
.after input[type="text"]:focus {
border: 2px solid #668933;
outline-width: 0;
}

If .div.fixed:active then add border to main div (how to?)

LoL, the title has even confused me a little xD Apologies.
I have a fixed element div where once you scroll over it, it follows, simple no problem there.
Now, I'd like to add a simple border to the .div once the div.class is activated by javascript.
Here is an example : http://jsfiddle.net/2ds2y/
once .main.fixed is activated I'd like to add border-bottom: 2px solid #ddd; to the .main div.
I've been reading around but I haven't been able to make this work, I tried the following.
.main.fixed:active ~ .main {
border-bottom: 2px solid #ddd;
}

Just add a border rule to your CSS fixed class:
.main.fixed {
position:fixed;
top:0;
border-bottom: 2px solid red;
}
jsFiddle example
When the class is applied and the div is fixed, the border will be added.

Ya friend simply add this line to the bottom of the CSS which is applied on .main.fixed
border-bottom: 2px solid #ddd;
like this
.main.fixed {
position:fixed;
top:0;
border-bottom: 2px solid #ddd;
}

Button press effect not working in css

I want to have this button pressed effect in css. I mean for example lets say I press a button then I want to change its css so that it looks pressed. Here is something that I tried. But it's not working. I used example from a site. But the button's size gets smaller and it looks different. Here is the link for the code http://jsfiddle.net/goku/GdD34/
.pressed{
position:relative;
top: 3px;
color: #fqq;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
input.happy {
background-image: url(/img/happy.png);
background-color: transparent;
background-repeat: no-repeat;
border: none;
width: 64px;
height: 64px;
margin: 10px;
cursor: pointer;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
box-shadow: 0px 3px 5px #000;
-moz-box-shadow: 0px 3px 5px #000;
-webkit-box-shadow: 0px 3px 5px #000;
}
$('.happy').click(function() {
alert('hello');
$('.happy').attr('class','pressed');
});
<input type="button" class="happy">

Just used the :active pseudo-class.
input.happy:active { /* Your style */ }

This is happening because you're replacing the class and not adding a new one. you should use :
$('.happy').addClass('pressed');
Instead of :
$('.happy').attr('class','pressed');
Because when u do that you remove all the css you previously applied to it. Your other option it to add the width/height or any other css to the pressed class.

There are a few things in your code (fiddle):
I guess you want to use a javascript framework (like jQuery), you did not select one in the fiddle.
You have a typo in the fiddle, inside the function it says $('happy') so no element will be found.
You remove the class "happy" within the javascript and replace it with pressed. Maybe you want to apply both $('.happy').attr('class', 'happy pressed'); But then for change .pressed to input.pressed and move below .happy
Perhaps you don't want all buttons to change, use use $(this).attr(...) inside the function

I'd suggest you change the order of your CSS, the and the JS to:
<style>
input.happy {
background-image: url(/img/happy.png);
background-color: transparent;
background-repeat: no-repeat;
border: none;
width: 64px;
height: 64px;
margin: 10px;
cursor: pointer;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
box-shadow: 0px 3px 5px #000;
-moz-box-shadow: 0px 3px 5px #000;
-webkit-box-shadow: 0px 3px 5px #000;
}
input.happy.pressed{
position:relative;
top: 3px;
color: #fqq;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
</style>
<script>
$(function(){
$(".happy").click(function(){
$(this).addClass("pressed");
});
});
</script>
<input type="button" class="happy">
Note, the "$(function(){" bit says "do this after page load". "addClass" will add the class to the list of classes for an element, but the event must be assigned after the DOM has loaded.
Also, you must use '$(this)' instead of '$(".happy")' inside the click function as to only apply the style to the button that was clicked.

You had some syntax errors.
Best event for this isn't .click(), its .mousedown();
When you click the Button without Releasing:
$('.happy').mousedown(function() {
$('.happy').attr('class','pressed');
});
I believe now it's working : http://jsfiddle.net/HKZ7M/
Then when you release the mouse, give it back the old class.
When you Click the Button then Release it
$('.happy').mousedown(function() {
$('.happy').attr('class','pressed');
$('.pressed').mouseup(function() {
$('.pressed').attr('class','happy');
});
});
It's working : http://jsfiddle.net/Xx2Gn/
Important Note: The .pressed button is smaller than the .happy button, when you release the mouse you have to make sure that the pointer will be above the new .pressed button, that's why you must make them the same size.

jquery problem with addClass() & toggleClass() & default CSS value

As you can see in following code, background not changes, but border changes.
The problem is with default background value.
How to solve this problem?!
jquery:
$(document).ready(function() {
$('input').bind('focus blur', function() {
$(this).toggleClass('focus');
});
});
CSS:
input{background-color: blue;}
focus{background-color: red; border: 1px solid blue}
HTML:
<input>

The background defined on input is applied to the tag because of its priority. focus is a class, while input is a tag.
Try setting :
input{
background-color: blue;
}
.focus{
background-color: red; !important
border: 1px solid blue;
}

try write:
background-color: red !important;
instead:
background-color: red;
Also you can write this without jquery. Why you don't write following:
input{background-color: blue;}
input:focus{background-color: red; border: 1px solid blue}

The css is incorrect. dot is missing for focus.
input{background-color: blue;}
.focus{background-color: red !important; border: 1px solid blue;}