I have added a border to a button on mouse hover but this disturbs the HTML layout. How can I do this without disturbing the HTML layout?
Why not have a border there all the time, but initially have it the same colour as the background so it's effectively transparent?
Then simply change the colour on mouseover.
You can use css box-sizing property write like this:
.child:hover{
border:1px solid green;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
Check this http://jsfiddle.net/zFJHV/1/
or
you can use
div{
border-bottom:1px solid red;
margin-bottom:-1px;
}
EDIT:
may be you can use outline instead of border check this:
http://jsfiddle.net/zFJHV/2/
On the hover, reduce the width of the button by the pixel width of the border x2.
For instance, if the button is 100px wide and you're adding a 1px border all the way around, then on hover the CSS should be:
width: 98px;
border: 1px solid #000;
There are several possible solutions, some of which were posted in other answers.
If you want a border all the way round the element, the simplest and easiest is to add an outline. Outlines do not affect the flow of an element, but they do not work on individual sides. (Their intention is to be used for debugging rather than design.)
button:hover { outline: 1px solid black; }
The solution by Stephanie to reduce the element's width won't move other elements on the page, but since you are shrinking the element's size, the content inside will get moved. (Edit: actually in theory this could wrap some text onto an extra line and thus push some other elements down.)
You can set a negative margin on hover as sandeep said (in his original answer), which effectively cancels out the additional space used by the element. As far as I can tell this doesn't affect the flow but there could be edge cases.
button:hover { border: 1px solid black; margin: -1px; } /* all sides*/
button:hover { border-bottom: 1px solid black; margin-bottom: -1px; } /* bottom only */
Another solution is to set the border to be the same as the background colour (as Sir Crispalot suggests), or you can make it transparent. Then change the colour on hover. Making it transparent will work on any colour background, but the background colour of the element (the button in your case) will show through.
/* for a patterned page background: */
button { border-bottom: 1px solid transparent; }
button:hover { border-bottom: 1px solid black; }
/* or, if the button has a background colour: */
button { border-bottom: 1px solid #fff; }
button:hover { border-bottom: 1px solid black; }
On hover button, add border and reduce width and height 2 px each. This will not change the layout.
Related
I was wondering if anyone can help me. I'm trying to change the colour of my square at the bottom of my homepage it keeps on disappearing when I attempt to change the colour. I'm trying to change it to the colour white from solid red. Why does this keep happening?
Here is my codepen
Below is my CSS coding.
.next {
position:absolute;
bottom: 40px;
left:50%;
cursor:pointer;
height: 50px;
width: 50px;
border: 4px solid red;
border-top: none;
border-left: none;
transform: translateX(-50%) rotate(45deg);
}
Kind Regards,
Liam
Based on your css the arrow shape and color is set with the border property. In this case it's the right and bottom borders of your div that are given a red border, then the div is rotated to look like an arrow pointing downwards.
Update the border color to white instead of red:
border: 4px solid white;
If you were already doing the above, check in the developer console. Sometimes codepen doesn't fully update with your changes -- reload the page to try it again.
Have you tried using specifying the color as a hex value?
border: 4px solid #ff0000; //red
I'm trying to making the border of the an image to be red when on hover, but it's not working for some reason. What am I doing wrong?
img: hover {
border: 1px solid red;
}
<img src = 'http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'>
Remove the space after the colon. It works in Chrome and IE11, at least.
img { border: 1px solid white; }
img:hover {
border: 1px solid red;
}
<img src = 'http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'>
EDIT: As mentioned in another answer, you may want to add a white border around the image so it won't shift when you hover over it. I have incorporated that in the code snippet above.
Cant comment, but we are talking CSS here, not HTML.
Add in a border for default to fix jumpy image. U could do
img { border: 1px solid rgba(0,0,0,0); }
I have this JSFiddle
<div class="boo">
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
CSS
.boo{
border-left: 12px ridge red;
}
and i want to customize the two colors. I tried to put this outline-color:12px solid darkblue in the class boo but it doesn't work..
To obtain two distinct colours for a 12px left border, just give a 6px-wide red left border for .boo element and another 6px.wide blue left border for the inner paragraph
example fiddle: http://jsfiddle.net/uyTd7/1/
CSS
.boo {
border-left: 6px solid red;
}
p {
border-left: 6px solid blue;
}
But this will work until you have two elements and no margin or padding between: if you had one single element (e.g. a <p>) you could reach the same result on modern browser using box-shadow property (with vendor prefixes where necessary), e.g.
p {
border-left: 6px solid red;
box-shadow: -6px 0 0 blue;
}
example fiddle: http://jsfiddle.net/7cq78/1/
There are several ways you can add another 'border'
1. Using outline (wont work with rounded corners though)
http://www.w3schools.com/css/css_outline.asp
2. Using :after & :before
:after and :before lets you create a whole new element with fully customize-able border (and outline). The limit is your creativity
3. Border style & image
There are many kind of border style such as solid, dashed, dotted, ridge etc. Also you can just easily use repeating image for your border
try this
.boo{
border-left: 12px solid red;
outline:12px solid darkblue ;
}
p{
padding-left:10px;
}
one limitation is IE6 and IE7 don't support the outline property.
In below example I have two divs:
Both have the same content and almost the same style, except that the second div has one more style:
border: 1px solid black;
The problem is that this border is doing a resize of the internal content and I don't want this. I want to put a border on some divs on the page dynamically during the page load, but without chage any measures or changes in the content.
Has a way of doing this? I can use javascript if necessary, but a solution that only use css will be more apreciated.
Instead of border use outline
div.border
{
outline: 1px solid black;
}
DEMO
You can also use a transparent border, like: border: 1px solid transparent;
Then apply any other color you want.
You can use transparent borders, then when you will apply border color the size will remain the same. Here is a fiddle
html
<div>
</div>
css
div {
border:2px solid transparent;
width:200px;
height:200px;
background:#eeeeee;
margin:10px;
}
js
$("#red").on('click',function() {
$("div").css("border","2px solid red");
});
$("#transparent").on('click',function() {
$("div").css("border","2px solid transparent");
});
You have 2 options.
Use css : 1px solid transparent; and
Use css : box-sizing:border-box;
I have a Cloud of items which have all a hover state.
:hover {
opacity: 1;
border: 1px solid #333333;
}
but upon hovering all the other items get a weird re-alignment which switches back if hover is not triggered.
I tried making he padding bigger but it's still the same.
What am i missing here.
-----> http://jsfiddle.net/mMGAU/
The problem is, that the new border makes the element 2px wider. You can solve it like this:
champs-tag-card {
padding: 1px;
}
.champs-tag-card:hover {
padding: 0;
}
Demo
Try before buy
As an alternative: You could also set the border-color to transparent in the "normal" state.
On hover you add a 1px border which is not there normally. This causes your element to grow by 2px in both width and height. This causes your other elements to re-align accordingly.
You could place an initial 1px transparent border on your elements so they do not resize when the border is set.
.champs-tag-card {
border: 1px solid transparent;
http://jsfiddle.net/mMGAU/11/
border is increasing the width so go with outline property.
.champs-tag-card:hover {
opacity: 1;
outline: 1px solid #333333;
}
JSFiddle
Try adding:
border:1px solid transparent;
to .champs-tag-card. The border takes up space, and this is causing the re-alignment.