Question

我尝试准备一个简单的工作组合。我从数据库中以编程方式选择作品。我只想把鼠标放在div的工作变化背景图像上。

<div>
    <div style="width:100%; position:absolute;">
    <ul>
    <li style="background-image:url(1.png);"></li>
    <li style="background-image:url(2.png);"></li>
    <li style="background-image:url(3.png);"></li>
    </ul>
    </div>

    <div class="row">
        <div class="col-lg-4">
            <a href="#">WORK 1</a>
        </div>
        <div class="col-lg-4">
            <a href="#">WORK 2</a>
        </div>
        <div class="col-lg-4">
            <a href="#">WORK 3</a>
        </div>
    </div>
</div>

在上面的ul li标签上，这些是我的图像，当我将鼠标悬停在底部的链接上时，我将滑动其中一个。我该如何滑动图像。我应该认识每个li标签。

Answer 1

为工作项添加标识符。像work_1，work_2等。并为每个项目添加一个类。

<div>
    <div style="width:100%; position:absolute;">
    <ul>
    <li id="work_1" class="work-item" style="background-image:url(1.png);"></li>
    <li id="work_2" class="work-item" style="background-image:url(2.png);"></li>
    <li id="work_3" class="work-item" style="background-image:url(3.png);"></li>
    </ul>
    </div>

    <div class="row">
        <div class="col-lg-4">
            <a href="#" data-show="work_1">WORK 1</a>
        </div>
        <div class="col-lg-4">
            <a href="#" data-show="work_2">WORK 2</a>
        </div>
        <div class="col-lg-4">
            <a href="#" data_show="work_3">WORK 3</a>
        </div>
    </div>
</div>

每次悬停在每个项目上时，您都会隐藏所有项目，并显示您的元素链接到的项目。

<script>
$('.work_hover').mouseover(function() {
    var id_to_show = $(this).attr('show');
    $('.work-item').hide();
    $('#' + id_to_show).show();
});
</script>

要完成滑块，您可以为节目添加炫酷的动画并隐藏方法

如何以编程方式在onmouseover链接上滑动图像

1 个答案: