Develop Reference

Expand hover area while keeping background color

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.

How to reduce width of div using JQuery, CSS so that the left section is reduced and not the right?

This sounds like a stupid question but I cannot figure an easy way of doing it. Let us say that I have a fixed-width Div with the string ABCDEFGHIJ as its content. If I reduce the width it will stop showing HIJ or whatever from the right side. I want the visibility of the content from the left side getting impacted. So, let's say that the div has a width of 100px, then
$(div).css('width':'50px');
should not impact the display of EFGHIJ, for example.
Yes, I could have an inner div and shift its position to the left, for example, by the amount of width reduced. Is there a shorter way of doing this?
Thanks

To Hide the beginning letters but not the last letters, you need to change the direction of the letters using css direction: rtl.
and also to hide the letters, you should mention overflow: hidden and some width to the container.
Working Fiddle

One solution is to use a wrapper and CSS positioning:
jsFiddle example
<div id="outer">
<div id="inner">ABCDEFGHIJ</div>
</div>
#outer {
position:relative;
overflow:hidden;
border:1px solid #999;
width:50px;
height:20px;
}
#inner {
position:absolute;
right:0;
}

Make front <div> to react to mouse events but propagate them to lower elements too

I have a moving background, composed by some layered images, that must react to mouse position changes. This big <div> is placed in the lowest level of my page, using position:absolute, top: 0px and a low z-index.
You've probably already understood the first problem: initally, this <div> didn't get any mouse event when the cursor moves into one of the upper elements.
The first solution could be to set this CSS property to every front element: pointer-events: none;, but I really don't like it. How about the button? If I move the mouse on it, the background will move as espected, but the click will not be fired.
Secondary option, a mad trick: put another transparent <div> at the root of the page, at the same absolute position of the background, but with a very high z-index. It will listen to mouse coordinates and will transmit them to the moving background.
Don't know what do you think about it, but it should work apart from a thing: this transparent layer captures the mouse events, but they aren't propagated to the lower texts and buttons, that continue to be "inactive".
Is there a way to fix this behavior? Make the transparent listener to catch mouse events but also propagate them to every lower element (something like a "special" pointer-events rule).

Can you provide a JsFiddle? I couldn't reproduce it here in this fiddle.
Making the button a link with a high z-index still allows the mouvemove event to be captured by an underlying div.
Would this solve the problem?
HTML:
<div id='movingBackground' class='moving-background' >
<a class='button'>Button</a>
</div>
<div id='coordinates'>Coordinates get updated here on hover over div above</div>
CSS:
.moving-background {
background: url('http://i.stack.imgur.com/jGlzr.png') no-repeat 0 0 scroll;
width:300px;
height:100px;
}
.button {
position:absolute;
top:20px;
left:50px;
height:50px;
width:100px;
background:blue;
color:white;
cursor:pointer;
z-index:20;
}
Javascript:
$('#movingBackground').on('mousemove',function(event) {
$('#coordinates').text('X ' + event.pageX + ' - Y ' + event.pageY);
});

Rotation of CSS arrow and javascript toggling

I have two div banners that have corresponding CSS arrows. When the banners are clicked, the javascript toggles between revealing and hiding the text underneath. Likewise, the respective arrows rotate down when the text is revealed and back up when the text is hidden.
Now, I want my first div banner to be revealed automatically when the page first loads. However, when I drew my CSS arrows, due to the padding of the div, I can't get the arrow in the first div to be the same as the arrow in the subsequent div(s) and line up properly.
http://jsfiddle.net/nVuQ2/1/
I've tried messing with the placement of the arrow:
.tri0 {
margin-left: 20px;
margin-top: 5px;
}
but the best I can do is push the tri0 arrow up to the padding of the h3 tag and it won't go any farther.
Is there a way that I can set a toggle flag in the toggleClass to make it say that the first div banner is already toggled and subsequent clicks make it un-toggle?

Your issue happens because of the border of your tris elements. You are displaying different borders in each one of your elements, this will make them appear in different ways.
So basically I set them with the same borders values, the same rotation, and when your page first load it toggles your div and show your first message.
Note that is not necessary to have two different classes to toggle your element state, once that they are equal.
Check in the Fiddle.
Not sure if this is the solution that you wanted. But I hope that helps you.
Thanks.

Try using absolute positioning instead of floating, this way you can ensure the arrows are always aligned in the middle. You'd set parent div to position:relative, and arrows to position:absolute;
The code will look like this -
.slide0, .slide1 {
position:relative;
}
.tri0, .tri1 {
position:absolute;
top:0;
bottom:0;
margin:auto 0;
}
.tri0 {
right:5px;
}
.tri1 {
right:10px;
}
EDIT: Whoops, I realised I didn't compensate for the rotated arrow. Because the 10px border makes it effectively 10px wide, position .tri1 with right:10px instead. Updated code above, and update fiddle here.
Updated Fiddle

Affecting the motion of a div container with another moving div

Sorry for the confusing title. But, you can see here a JsFiddle DEMO What I mean.
What I am trying to achieve is to, move the black container as soon as it gets in contact the red container container. Meaning, I don't want the red container to overlap with the black on, I am trying to move the red, relative to the position of the red on.
I am probably certain this can be achieve using normal CSS with float/margin/display adjustments, that I am unable to produce now.
Here is the code:
JavaScript
var speed =80, deg=0, center={x:50,y:50},
moveBox = function(){
var el = document.getElementById("circle"),
left = el.offsetLeft,
moveBy = 3;
deg+=moveBy;
el.style.left =center.x+Math.floor(40*Math.sin(deg/150*Math.PI))+"px";
el.style.top =center.y+Math.floor(20*Math.cos(deg/150*Math.PI))+"px";
};
var timer = setInterval(moveBox, speed);
HTML
<div id='square'></div>
<div id='circle'></div>
CSS
#circle{background:red; display:inline-block; width:80%; height:40px; position:absolute; border:1px solid #454545; margin-top:100px;}
#square{width:60px; height:50px; background:black; display:block; position:relative; position:absolute; margin-left:100px; margin-top:100px;}

I've been toying with this on your Fiddle and it seems very untaskable at the moment. To fix problems of divs moving when animations are done, you put a relative/absolute css position on them. But when doing that to yours, it breaks the darn Circle.
So, if you can figure out how to make the circle work without a css position like so, then it should work itself out. Sorry for the lack of finding a simple solution for you.