**tldr:** look here: http://joon.be/dalida/
hover over the yellow 'town' and over the blue 'town'. The yellow one doesn't create a scrollbar, the right one does. Why?
**Long version:**
I have a line entering from the left side to point at something when it is hovered over.
This works. I'm trying to do the same from the right side, same principle just mirrored, and have figured out how to do this, but it has the weird side effect of creating a horizontal scroll bar, since the image is partially out of the screen. On the left side, this does not happen, even though it works almost exactly the same afai understand.
Here's the left, working, code:
$('.dalidatown').hover(function(){
$('.dalidapath').stop().animate({width: '903px'});
},function(){
$('.dalidapath').stop().animate({width: '0px'});
});
The 'path' is a div that has the line as background. Here's the CSS for this:
.path {
position: absolute;
border: 0px;
}
.dalidapath {
width: 0px;
height: 83px;
z-index: 10;
top: 130px;
left: 50%;
margin-left: -1110px;
background-image:url('bin/dalidapath.png');
}
Now on the right side, I couldn't just use width, I had to play with the margin as well, so it looks like this:
$('.therapietown').hover(function(){
$('.therapiepath').animate({width: '903px'}, {queue: false}).animate({marginLeft: '97px'}, {queue: false});
},function(){
$('.therapiepath').animate({width: '0px'}, {queue: false}).animate({marginLeft: '1000px'}, {queue: false});
});
this does everything I Want it to, other than create the scrollbar...
Here's the relevant css:
.path {
position: absolute;
border: 0px;
}
.therapiepath {
width: 0px;
height: 83px;
z-index: 10;
top: 130px;
left: 50%;
margin-left: 1000px;
background-image:url('bin/therapiepath.png');
background-position:right top;
}
So you can see it live here: http://joon.be/dalida/
以上就是Why does sliding (collapsing) from Right To Left create a scrollbar where LTR doesn't?的详细内容，更多请关注web前端其它相关文章！
