How do I prevent elements from shifting when I add a border to them?
example:
p:hover
{
border:1px solid red;
}
p
{
border:none;
}
But is not working
Always give them a border, just make it transparent when it's not hovered:
p {
border:1px solid transparent;
}
p:hover {
border:1px solid red;
}
JSFiddle
Of course it's one answer, your question can be answered a number of ways.
p {
border:1px solid transparent;
}
Related
I would like to keep only bottom border of a textbox. Here is my css-
input[type="text"],input[type="password"] {
border:0px;
border-bottom:1px solid black;
}
input[type="text"]:focus, input[type="password"]:focus {
border-bottom:2px solid green;
}
Here is how it looks at-
On chrome-
On firefox-
On chrome, textbox gets a outline when it got focus. Is there any way to remove it?
input[type="text"]:focus, input[type="password"]:focus {
outline:none;
border-bottom:2px solid green;
}
you are missing outline:none.
I simply want .work-description to have a bottom border also when .project-link is hovered.
.work-description { padding-top:50px; width:50%; margin:0 auto;}
.project-link { font-size:3em; text-decoration:none; }
.project-link:hover { border-bottom: 3px solid #000; }
.project-link:hover + .work-description {
border-bottom: 3px solid #000;}
I am not sure if you are aware that the + is referred to as an adjacent selector. It will select only the element that is immediately preceded by the former element. In this case, the element having work-description class has to immediately after the project-link class.
If you have the right html (as shown below in the example), your code just works fine.
.work-description {
padding-top:50px;
width:50%;
margin:0 auto;
}
.project-link {
font-size:3em;
text-decoration:none;
}
.project-link:hover {
border-bottom: 3px solid #000;
}
.project-link:hover + .work-description {
border-bottom: 3px solid #000;
}
<input type="button" value="abcd" class="project-link">
<div class="work-description">some random text here</div>
Hope this helps!!!
How can I highlight all spans and divs in my html that have classes that are not styled? this is for debugging purposes, to remind me what I will still have to fix up.
Use border to highlight the span and div elements
Do either:
span, div{
border: 1px solid red;
background-color: yellow;
}
Or:
.unstyledClassOfDivAndSpan{
border: 1px solid red;
}
I would add an XXX class to all the elements, then use this definition:
.XXX {
border: 5em solid red;
background-color: green;
}
Make sure this is at the end of the stylesheet so it doesn't get overridden. Then as elements are done, remove the XXX class.
Please Use this Css Hover Style for highlight all spans and divs in your html
div, span{
border: 1px solid red;
background-color: Black;
}
div:hover, span:hover{
border: 1px solid Black;
background-color: red;
}
OR
*Please Use this Css and Jquery Hover Function for highlight all spans and divs in your html*
.hilight{
border: 1px solid red;
}
$(function(){
$("spna div").hover(function(){
$(this).toggleClass("hilight");
});
});
I am trying to add a border to an image on rollover. The border is not showing when I roll over the image. Here is my code:
<script>
$(document).ready(function() {
$("#imgBorder").hover(
function() { $(this).addClass("Hover"); },
function() { $(this).removeClass("Hover"); }
);
});
</script>
Hover { border: 1px solid #000; }
<div id="imgBorder">link...
Why isn't the border appearing on hover?
Also, is there any way to do this so that it does not re-size the image when adding the border?
You do not need to use javascript to add hover on image rollover. Just add it to the css class instead.
<style language="text/css">
.rollOver : hover
{
border: 1px solid #000;
}
</style>
<div class="rollOver" id="imgBorder">Test</div>
First, to affect the image, your jQuery should be:
$("#imgBorder img").hover(
function() { $(this).addClass("Hover"); },
function() { $(this).removeClass("Hover"); }
);
And your CSS should be:
.Hover { /* note the period preceding the 'Hover' class-name */
border: 1px solid #000;
}
JS Fiddle demo.
Note that:
.string selects element(s) by their class-name of string: <div class="string"></div>
#string selects an element by its id, which is equal to string <div id="string"></div>
string selects an element of string: <string></string>
But you don't need JavaScript, just use:
#imgBorder:hover img,
#imgBorder img:hover {
border: 1px solid #000;
}
JS Fiddle demo.
Something like this will work in CSS, link below
.rollover_img {
width: 280px;
height: 150px;
background-image: url(land.jpg);
background-position: top;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border:10px solid #ccc;
font:13px normal Arial, Helvetica, sans-serif;
line-height:18px;
float:left;
margin:0 10px 10px 0;
}
I will direct you to the following link
http://aceinfowayindia.com/blog/2010/02/how-to-create-simple-css-image-rollover-effect/
In your selector below, you're targeting an element with the tagname "Hover". This does not exist.
Hover { border: 1px solid #000; }
What you wanted instead was:
.Hover { border: 1px solid #000 }
As others here have already pointed out, you don't need JavaScript for this as you can use the :hover pseudo-class:
img { border: 1px solid #FFF }
img:hover { border-color: #000; }
For further reading, see http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes
The background color, font color and border are being lost when I drop an element.
How do I keep these properties intact? Here is the project in jsFiddle:
http://jsfiddle.net/n2learning/tV4n7/48/
Thanks!
Just needed a minor change to your CSS. I've removed the #routinefilter from this rule so it applies to all .droptrue elements, no matter what their parent element is:
.droptrue{
background: lightgray;
color: navy;
margin:10px;
padding:5px;
border:2px solid #666;
}
Here's the working example.
Your CSS rule:
#routinefilter .droptrue{
only applies to elements with a class droptrue WHILE they are in the container routinefilter. Once you drop them in the box, they are no longer inside routinefilter and the rule doesn't apply. Try changing that to just:
.droptrue{
Your CSS selector was specific to the point of origin, but not to the dropping-point. Add #dropTargetframe .droptrue to your selector, to give:
#routinefilter .droptrue,
#dropTargetframe .droptrue {
background: lightgray;
color: navy;
margin:10px;
padding:5px;
border:2px solid #666;
}
Updated JS Fiddle.
Or you could simply remove the ancestor id from the selector, to give simply:
.droptrue {
background: lightgray;
color: navy;
margin:10px;
padding:5px;
border:2px solid #666;
}
Updated JS Fiddle demo.
This should do the trick.
#routinefilter .droptrue, #dropTargetframe .droptrue{
background: lightgray;
color: navy;
margin:10px;
padding:5px;
border:2px solid #666;
}
The .droptrue elements will keep the same css style when inside the box as well!
Edit:
You can also change it to only .droptrue if you want those boxes to use this style wherever they are.
Change
#routinefilter .droptrue
into
.droptrue
Edit: Whoops, too late :)
Add to CSS
.droptrue
{
font: 16px serif
background: none repeat scroll 0 0 lightgray;
border: 2px solid #666666;
color: navy;
margin: 10px;
padding: 5px;
}