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); }
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 know there are other questions like this but I've tried everything they have suggested to no avail. This is a different question than Remove dotted outline from range input element in Firefox as I'm asking what is causing this rogue outline - the previous question answers how to get the colored outlines shown below.
This SO question (Remove dotted outline from range input element in Firefox) mentions the firefox bug - https://bugzilla.mozilla.org/show_bug.cgi?id=932410 but it has since been marked as resolved but I'm still having this issue.
The input CSS is:
input[type=range]:-moz-focusring {
outline: 1px solid orange;
}
input[type=range]:focus {
outline: 1px solid green;
}
input[type=range] {
-moz-appearance: none;
}
input[type=range]:focus::-moz-range-thumb {
outline: 1px solid red;
}
input[type=range]:focus::-moz-range-track {
outline: 1px solid blue;
}
input[type='range']::-moz-focus-inner {
outline: 1px solid red;
}
The computed CSS from my browser is:
The rendered input in the browser looks like this:
From my testing it looks like :-moz-focusring and :focus are the same property - green outline, overwrites the orange.
-moz-appearance: none; on the element does nothing along with ::-moz-focus-inner.
You can see the range-thumb has a red border and range-track has a blue border but there is still the dotted outline. I tried the 'hide it behind a border' trick from the 2nd answer in the above SO question but then the white border is on top of the range-thumb like the dotted outline is in the picture. The outline-offset also does not extend on the left or right so the dotted lines on the end still show.
input[type='range']::-moz-focus-outer { border: 0; }
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.
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.