Question

今天我正在构建一个垂直导航菜单，我想知道如何构建我正在考虑的特定功能。

以下是我的按钮背后的编码：

HTML：

<div class="button"><a href="#">
    <img src="../images/article.png" />
    <p>Articles</p></a>
</div>

<div class="button"><a href="#">
    <img src="../images/leaderboards.png" />
    <p>Leaderboards</p></a>
</div>

<div class="button"><a href="#">
    <img src="../images/events.png" />
    <p>Events</p></a>
</div>

<div class="button"><a href="#">
    <img src="../images/search.png" />
    <p>Search</p></a>
</div>

<div class="button"><a href="#">
    <img src="../images/other.png" />
    <p>Other/Tools</p></a>
</div>

的CSS：

.button{
    border-left:10px solid #e5dad6;
    padding-left:5px;
    margin-bottom:20px;
    width:120px;
    height:120px;
    text-align:center;
}

我的目标：

现在我的目标是当用户将鼠标悬停在整个div（按钮div）上时更改相关按钮的图像，现在当然我可以通过在css中添加悬停状态来实现这一点，但这不是我想要的做，因为我不想只改变那个特殊的div。

我想要的是什么：

我想要它所以我基本上可以说=如果.button正在盘旋，然后更改页面上其他内容的img src，而不是更改与正在盘旋的元素相关的内容。

Answer 1

您可能需要检查.hover()是否有jQuery

Answer 2

你可以用jquery做你想要的事情。

<div class="button" id="article_button"><a href="#">
    <img src="../images/article.png"/>
    <p>Articles</p></a>
</div>



$('.button').on('hover', function(){
    $('#some_other_element').data('oldimg', $('#some_other_element').attr('src')).attr('src','other_image.jpg');
}, function(){
    $('#some_other_element').attr('src', $('#some_other_element').data('oldimg'));
});

Answer 3

使用jQuery执行类似的操作：

$(document).ready(function() {
    var oldSrc = $('.myNewImage').attr('src');

    $('.button').hover(function() {
        //on hover of your element

        $('.myNewImage').attr('src','http://mynewimagesrc.com');
    }, function() {
        //when the cursor leaves your element

        $('.myNewImage').attr('src', oldSrc);
    });
});

您必须为页面上的图像的实际类切换.myNewImage类，但这应该适用于您所要求的内容。它还分配了图像的原始来源，以便您始终可以将元素返回给它。

需要JavaScript / jQuery指导

3 个答案: