Question

我正在尝试实现类似http://www.jamieoliver.com的内容（滑块 - ＆gt;悬停时的箭头）

我做了这么多http://jsfiddle.net/PXLJG/5/在jsfiddle脚本中？箭头必须是站立的。 div.class = content“Text next article”必须滑动到箭头旁边的左侧。

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

HTML：

<div class="holdingbox">
    <a href="#">
        <div class="margined">
            <div class="rightbox">
                <div class="content"><p>Következő cikk</p></div>
            </div>
            <div class="leftbox"> > </div>
        </div>
    </a>
</div>

CSS：

    div {
    display : inline-block;
}

.holdingbox {
    position: relative;
    top: 0;
    margin-left: 100px;
}

.leftbox {
    position: absolute;
    display: inline-block;
    height: 36px;
    background-color: #ac193d;
    color: #FFF;
    font-weight: bold;
    padding: 1px;
}

.holdingbox a {
    text-decoration: none;
    color: #FFF;
    display: block;
}

.leftbox img {
    margin: 0 auto;
    margin-top: 10px;
}

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

.rightbox a {
    text-decoration: none;
    color: #FFF;
}

.content {
    width: 120px;
    position: absolute;
    background-color: #ac193d;
    height: 38px;
    text-align: center;
    left: 0;
    top: 0;
    right: 0;
    color: #FFF;
}

.content p {
    margin-top: 8px;
}

Answer 1

只需在position: absolute; right: 0;课程中添加.rightbox。

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

在此工作 - http://jsfiddle.net/PXLJG/7/

Answer 2

您正在所有inline-block上应用div样式。请恢复为block的正常显示。

div{
    display: block;
}

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

http://jsfiddle.net/PXLJG/8/

这应该可以解决你的核心问题。

现在，如果您想要显示文本div左侧的箭头，请移除箭头上的absolute位置。

现在，您将在inline-block元素之间有一个空格，即箭头和文本。要删除它，请轻松删除div

中这两个HTML之间的空格

http://jsfiddle.net/PXLJG/18/

对于与网站完全相同的内容，您可以尝试使用绝对定位来定位箭头和文本，并使用right属性进行锚定。

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

http://jsfiddle.net/PXLJG/20/

Answer 3

我试图修复你已经获得的代码，但它需要进行一些重大的改造，所以我只是重新完成了这一切。

JSFiddle：http://jsfiddle.net/t2z9Q/

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＆amp; css并非真正需要，但仍能获得同样的效果。

jQuery div向左滑动div / nextarrow

3 个答案: