Javascript jQuery div向左滑动，将光标悬停在div/nextarrow上

我正在尝试实现类似的功能（滑块->悬停箭头）

我在JSFIDLE脚本中做了这么多？箭必须是直立的。div.class=content“Text next article”必须滑到箭头旁边的左侧

$('.holdingbox').hover(function () {
    $('.rightbox').stop().animate({
        width : '120px'
    }, 400)
}, function () {
    $('.rightbox').stop().animate({
        width : '-0'
    }, 400)
});

HTML:

---

您正在对所有

div

s应用

inline block

样式。请恢复正常显示

块

div{
    display: block;
}

或者删除它，因为默认显示为

block

这将解决你的核心问题

现在，如果要显示文本div左侧的箭头，请删除箭头上的

absolute

位置

$('.holdingbox').hover(function () {
    $('.rightbox').stop().animate({
        width : '120px'
    }, 400)
}, function () {
    $('.rightbox').stop().animate({
        width : '-0'
    }, 400)
});

现在，在

内联块

元素之间有一个空格，即箭头和文本。要删除它，请轻松删除

HTML

中这两个

div

之间的空白

<div class="container">
    <div class="content">Next Article</div>
    <div class="arrow">></div>    
</div> 

对于与网站中完全相同的内容，您可以尝试使用绝对定位来定位箭头和文本，并使用它们的

right

属性来锚定它们

这样，随着宽度的增加，它将从右向左扩展

---

只需添加

位置：绝对；右：0在
.rightbox
类中

.rightbox {
    display: inline-block;
    height: 50px;
    margin-right: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    vertical-align: top;
    width: 0;
}

在这里工作-
我试图修复您已经得到的代码，但它需要一些重大的修复，所以我刚刚全部重新完成

JSFiddle：

CSS

.container {
    width: 120px;
    position: relative;
    overflow: hidden;
    color: white;
}

.container .content {
    width: 100px;
    overflow: hidden;
    position: absolute;
    left: 120px;
    float:left;
    z-index: 99;
    background: #ac193d;
}

.container .arrow {
    float: right;
    width: 20px;
    position: relative;
    color: black;
    z-index: 100;
    background: #ac193d;
}

JS

$('.arrow').hover(function() {
    $('.container .content').stop().animate({left: '0'}, 400)
}, function() {
   $('.container .content').stop().animate({left: '120px'}, 400)
});  

HTML

<div class="container">
    <div class="content">Next Article</div>
    <div class="arrow">></div>    
</div> 


下一篇文章
>    

这样一来，你就失去了很多实际上并不需要的术语html和css，但仍然得到了同样的效果。
你能试着澄清一下吗？我想用我的JSFIDLE脚本在jamieoliver.com滑块上制作一个箭头/按钮，正如你在jamieoliver.com上看到的，悬停箭头上的下一个按钮a div向左滑动为“更多视频”那么，我如何才能像这样修复我的JSFIDLE脚本呢？：/（当鼠标悬停在箭头上时，一个div滑入箭头的左侧，箭头必须处于悬停状态。）很抱歉，我的英语无法正常工作。示例站点显示箭头元素不应该移动，文本应该向左扩展。@PatrickEvans是的，很难理解OP想要什么。我已经扩大了答案。谢谢你的回复。