When hovering cursor over the link, it's like it jumps down or adds extra pixel on the bottom. Looks like a common problem. I've tried solutions I found on this site, but none seem to work.
This is js fiddle
https://jsfiddle.net/srhjv284/
This is html
<div class="wrap">
Item 1 text
Some Other Text
Last Item
</div>
And this is css
.wrap {width:200px;}
.item {
display:block;
margin:2px 0;
padding:4px 8px;
background-color:#fff;
font-family:arial;
font-size:15px;
color:#ba050a;
border:1px solid #ba050a;
text-decoration:none;
transition:0.4s;
}
.item:hover {
color:#fff;
background-color:#ba050a;
}
This is just happening because you have the same border colour and the background colour on hover.
So when you hover, 1px border merge with background and it feels like that space increased.
Please change the border colour or background colour on hover and you will see the difference.
Related
This question already has answers here:
Simple CSS button with a rectangle beneath
(4 answers)
Closed 9 years ago.
I'm trying to create a CSS based 'button' like this:
The blue is just a background, so it's only about the text "Welkom" and the rectangle displayed below.
Whenever it's active or hovered over it should display a rectangle BELOW the button.
HTML: (This is the button)
<li>Welkom</li>
If the below is your HTML:
<li>Welkom</li>
Then you can do this:
li:hover,li:active{
border-bottom:3px solid blue; /*change blue to the color you want*/
}
See this demo
Fiddle in response to comment: Fiddle 2
The above uses box-align property(http://www.w3schools.com/cssref/css3_pr_box-align.asp) to center the bottom border(without requiring adjustment) but it will not work in IE9 and below
Fiddle 3 : Will work in all browsers but you will have to adjust the bottom at the center using relative positioning for both li and a tag within it.
you can do that on :hover with a border-bottom:
But you may and a border already without the hover so avoid jumping.
a {
border-bottom: 5px solid transparent;
}
a:hover {
border-color: blue
}
The code above is not all you may need.
-Sven
EDIT: as you see the other answer, U ay do that on the list element directly.
simple just follow below code:
HTML:
<div class="link">Welkom</div>
CSS:
.link { background-color:#379AE6; width:100%; padding:8px; padding-bottom:16px; }
.link a{ font-family:arial; text-decoration:none; color:#fff;
}
.link a:hover{ border-bottom:8px solid #6BBBF8; padding-bottom:8px;
}
I'm creating an HTML module where I need to display 3 vertically aligned <div> with black border, white background and black font color. Each <div> has a link inside.
I would like to make this: When I move the mouse over that <div>, the background become black, and if the link inside is active, the background of the <div> is black (only of the <div> with the active link inside).
Is that possible? How can I create this? Now, I only have the <div> structure.
Have you tried assigning IDs to each div? You could try something like:
<div id="box1">
Click Here
</div>
<div id="box2">
Click Here
</div>
<div id="box3">
Click Here
</div>
With styling like
#box1 {
width:150px;
height:150px;
background-color:#FFF;
border:2px solid #000;
}
#box1 a {
color:#000;
}
If you want the background to change when you hover over the div, use:
#box1:hover {
background-color:#000;
}
#box1:hover a {
color:#FFF;
}
and if you want it to just do this when you hover over the link do the same as what I just wrote but change #box1:hover to #box1 a:hover
Hope that helps
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
Was just amusing myself with a little useless site, practicing this and that.
I came across a problem, where the link is only clickable on the left, not the right.
how it looks:
div, inside it a header(2) with in it a link
<div class="button one"><h2>example</h2></div>
It has a right border, a hover function and quite a width. It is absolute positioned. Been trying around a bit a came up with following code (it is a bith messy, sorry)
.button{
position:absolute;
padding:0px;
margin:0px;
width:300px;
height:70px;
background-color:#999999;
border-left:solid 7px #FF6600;
border-bottom:solid 1px #FF6600;
border-top:solid 1px #FF6600;
}
.button h2{
padding:0px;
margin:0px;
text-transform:uppercase;
color:#FFFFFF;
font-size:1,5em;
}
a{
margin:0px;
display:block;
text-decoration:none;
color:#FFFFFF;
padding:20px;
}
a:hover{
background-color:#FF6600;
}
problem: links are only links up about 1/2 the width. They background color of the hover changes the complete area, but only works when the mouse is in that link area. Not sure where I missed something. All help is appreciated!
For those who want to look into the css and html files themselves, i put them in a test.rar file:
http://www.sendspace.com/file/pe42e0
It's because the image #content_image_1 is positioned above your buttons. If you remove the z-index: 1; from that image, your buttons work as intended. Albeit with your image behind the buttons.
On Google chrome, if I have a div within an anchor, randomly the border will change to the text colour. If I inspect the element, the colour switches back instantly to the proper colour. Is there a way I can get around this error?
This is the html: (it doesn't happen every time, spontaneously it will be the wrong colour)
<a href="/about"><div class="navc">
<div class="navt"><?php echo $lang['0']; ?></div>
</div>
</a>
this is the css:
#nav
{
float:left;
width:100%;
height:30px;
background:url('../images/nav.png') repeat-x;
border:1px solid #C2C1C1;
text-shadow:0 1px 0 white
}
#nav a
{
color:black;
text-decoration:none
}
.navc
{
padding:0 10px;
border-left:1px solid #C2C1C1;
border-right:1px solid #EEE;
float:left;
height:100%
}
.navt
{
padding-top:6px
}
As can be seen on the following image,the border of the About navigation button is wrong
Only took me 3 hours to solve this bug (on days like this I feel like Webkit is just as bad as Trident)... but here's the answer:
It only occurs when you have an inline elements inside an anchor (<a>) with a "href" value that has been visited. Such as:
<span>Button</span>
To fix the issue, I added the following CSS:
a {color: blue}
a span,
a:visited span /* Webkit will render a blue border unless this is explicitly specified */
{
border: 1px solid red;
}
I found a solution,
if I use a span instead of a div, the issue doesnt seem to occur.
edit - it occurred once since its been a span, refreshed and it hasn't occurred since.
I just ran into this with some markup like this:
<a href="http://www.google.com" class="outer-link">
<img src="http://google.com/gif.png" />
</a>
My styles looked like this:
img { border: 2px solid gray; }
The gray border was getting turned into the blue link color, here is how I fixed it:
.outer-link { color: gray; }
So even when the img is getting the wrong border, it's defaulting to the gray border color that I specified. I know it's a bit hacky but it works.