Question

我们有：

HTML

<div class="category1">
    <div class="main_text">
        <ol class="rounded-list">
            <li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
            <li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
            <li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
            <li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
            <li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
            <li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
            <li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
            <li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
            <li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
            <li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
            <li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
            <li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
            <li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
            <li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
        </ol>
    </div>
</div>

CSS

.category1 {

   margin: 10px;
    padding-bottom: 300px;
}
.main_text {

    background: #AFCEE0;
    color: #000;
    line-height: 16px;
    font-size: 14px;
}
.rounded-list {
    counter-reset: li;
    list-style: none;
    *list-style: decimal;
    font: 15px'trebuchet MS', 'lucida sans';
    padding: 5px;
    margin-bottom: 4em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.rounded-list ol {
    margin: 0 0 0 2em;
}
/* -------------------------------------- */
 .rounded-list h3 {
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    *padding: .4em;
    margin: .5em 0;
    background: #ddd;
    color: #444;
    text-decoration: none;
    -moz-border-radius: .3em;
    -webkit-border-radius: .3em;
    border-radius: .3em;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
.rounded-list h3:hover {
    background: #eee;
}
.rounded-list h3:hover:before {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}
.rounded-list h3:before {
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: #87ceeb;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    -moz-border-radius: 2em;
    -webkit-border-radius: 2em;
    border-radius: 2em;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

fiddle

在此示例中，效果会在悬停时触发。

打开小提琴，将鼠标放在第一个<li>上并开始向下滚动页面。问题：如何使此滚动效果独立于鼠标位置？

所以我需要：

滚动页面时 - 逐个影响的元素
当你悬停元素时 - 它会影响

Answer 1

所以我找到了解决方案并且非常简单：

首先需要添加类来悬停css效果：

.h3_sel, .rounded-list h3:hover{
    background: #eee !important;
}
.h3_sel:before, .rounded-list h3:hover:before {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}

然后是一些jquery魔术：

$(window).scroll(function () {
    var sc = $(window).scrollTop();
    var c = Math.floor(sc / 70); // 70 depends of your <li> height
    $("h3").removeClass("h3_sel");
    $(".rounded-list li:nth-child("+ c +") h3").addClass("h3_sel");
});

fiddle

我有什么：

悬停效果有效，滚动效果有效，这非常紧凑，无需附加任何插件我可以添加任意数量的<li>。

感谢我

从滚动触发的不同元素（取决于当前屏幕位置）的效果

1 个答案: