I have a div that I want to expand the "hover area" of. (If your mouse is just outside of the element, the css :hover selector should still be in effect.)
I tried creating a transparent border: (border:10px solid transparent;) Unfortunately, my div has a background color, and the background "leaked" into the border area. (See fiddle for demonstration of the issue.)
I also tried using outline instead of border, but the outline doesn't seem to "count" as a part of the element when it comes to hovering. (It looks right, but won't detect the extra hover area.)
Is there any way to do this with plain CSS (preferably not many extra elements)? If not, is there a simple method using vanilla JS (no jQuery)?
$("#toggle").click(function(){
$("#attempt").toggleClass("border");
});
#attempt {
width:100px;
height:200px;
background:#aaa;
margin:50px;
}
#attempt.border {
margin:20px; /* Change margin to keep box in same place after border adds size */
border:30px solid transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div id="attempt"></div>
<button id="toggle">Toggle Border</button>
<p>Border (in the ideal case) would not change the element's background. However, adding the 30px border (even when transparent), will cause the background to change size.</p>
All you need to prevent the background to leak is the box-sizing property. It's a very important one. Just add it to #attempt:
#attempt {
box-sizing: border-box;
}
Check out the updated fiddle here. You can learn more about box-sizing here.
Related
Having a little issue over here.
I am trying to make a background image change to it's hover position (sprite), when i hover on a "DIV".
The image is inside this "DIV".
I have done an example in JSFIDDLE, but without sprite, just a background color.
Example JSFiddle
Tried this, but nothing:
$( "#box" ).hover(function(){
$( "#box_sm" ).css("background","black");
});
Why do you need js for it, you can do this in css only:
#box:hover > #box_sm{
background: white;
}
As you want to change your sprite then you can try changing its background-position property like this:
#box_sm{
background: url('yoururlofsprite') 0px 0px no-repeat;
}
#box:hover > #box_sm{
background: url('yoururlofsprite') 20px 20px no-repeat;
}
If you are asking about why your fiddle is not working because you forgot to include jquery from the left top Framewoks and Extensions. Also change your background to other default color to see the code working.
Your fiddle
Your JSFiddle demo has 2 problems:
Firstly, jQuery isn't included (you can include it that with the Frameworks and Extensions dropdown in the left sidebar). Your demo is throwing:
Uncaught ReferenceError: $ is not defined
Secondly, you're changing the #box_sm background colour from white to white, so you will not notice any changes even after jQuery is added.
Here is a modified JSFiddle demo that I've included jQuery on and set the default background colour of the #box_sm element to blue. When you now hover over the #box element, the #box_sm element's background will change to white.
If you want the background to change back when no longer hovering, you can drop the JavaScript completely and just make use of CSS's :hover:
#box:hover #box_sm {
background-color: white;
}
JSFiddle demo.
Please refer to this fiddle first:
http://jsfiddle.net/QhVNr/121/
I am writing a coding which enable user to drag the middle div[white color as in the fiddle.]
What i want originally is when dragging the white portion upward will make the height of green color div decreased while the blue color div's height will increase.
But it ends up like in the example, the draggable white div like lost control and just go upward/downward lightning fast and over the parent wrapper.
You may try to edit the code by comment out this 2 lines in javascript
$('#draggable_0').height(div1H);
$('#draggable_2').height(div3H);
Then the dragging function is acting like normal and will be contained within its parent.
How to solve this please anyone?
To make the dragging and also the the green and blue div acting normal.
Thank you.
The .draggable position is relative
So when you modify the #draggable_0 height, the position of .draggable will be relative to the #draggable_0.
change the css :
.draggable
{
height:20px;
width:130px;
cursor:pointer;
border:1px solid #000000;
background-color:#ffffff;
position:absolute;
}
How can I underline a text replaced with Cufon?
text-decoration is not supported by Cufon:
https://github.com/sorccu/cufon/wiki/known-bugs-and-issues
Perhaps you could add a border-bottom property to the element using normal CSS?
Cufon adds a class to the elements it creates that you can style (useful if your containing element has pads/margins). So for a link, just use this:
a .cufon {border-bottom: solid 1px #000000}
a:hover .cufon {border-bottom: none}
To keep your elements from shifting up/down, either add a border to the non hover state, or adjust the heights of both elements accordingly...
Be aware though. Adding a border bottom to a cufon class is quite ugly.
I'd be best to avoid underlines to these fonts in your design. It might look nice in Photoshop, but don't show this to you customers. It doesn't work out that well in HTML/CSS.
The problem is that the dimensions of the div box and its location will be changing dynamically via JavaScript, and the box itself must be 100% transparent.
Look at the picture to figure out what I mean. As far as I know, there is nothing that can be done via pure CSS, am I right?
Maybe you know some tricks that could help me out (except for that when it's done with four boxes on the perimeter nor when it's done with nested boxes)?
http://savepic.org/85113.png
Yeah, short of the advanced multiple background image stuff and/or border images in CSS 3, you’d need some nested divs.
Maybe something like this:
<style type="text/css">
.box-1-top,
.box-1-bottom{height: 5px; font-size: 0;/* Make height work in IE */ background: url(box-1-background.gif) left top repeat-x;}
.box-1-left{padding-left: 5px; background: url(box-1-background.gif) left top repeat-y;}
.box-1-right{padding-right: 5px; background: url(box-1-background.gif) right top repeat-y;}
</style>
<div class="box-1">
<div class="box-1-top"></div>
<div class="box-1-left">
<div class="box-1-right">
Box content here
</div>
</div>
<div class="box-1-bottom"></div>
</div>
In CSS3 you can do this by applying
Border Images
Before applying this look at
Browser support for CSS3 properties
What causes this to happen? (the mouse is not being moved or clicked)
I suspect that the :hover CSS style results in the object having a different size (possibly margin), which causes the :hover CSS style to cease to be applied. This returns the object to its original dimensions, and the :hover CSS style is applied by the browser once more.
The browser can only keep up with this at a certain rate and you see visible flickering.
It's an edge condition.
It is because you are adding a border on hover.
But because you hover near the top, when the border is added, your cursor goes outside of the element.
Would be best to add
border: 1px solid #FFFFFF;
border-bottom: 0px;
to begin with, in your CSS
At a guess, the rollover event is adding a border which changes the effective size of the element, so that the mouse is no longer over it, or something like that...