Question

我在网站的侧边栏中使用了图标和文字的组合，但是如果鼠标悬停在其中任何一个上，我希望图标和文字都能改变。在我的CSS文件中使用MouseOn和'hover'，当鼠标悬停在图标上时，我已设法使其工作，但如果鼠标只悬停在文本上，则只有文本会更改，但图标也不会更改。有人知道这样做的方法吗？我的网站链接和我目前使用的代码如下。谢谢大家。

http://www.retelevise.com

<span class="social-media-sidebar-panel">
<a href="https://www.facebook.com/re.televise" target="_external window fa">
<img src="http://www.retelevise.com/wp-content/themes/myownzee/branding/
socialmedia-facebook-1.png"
onmouseover="this.src='http://www.retelevise.com/wp-content/themes/myownzee/
branding/socialmedia-facebook-2.png'"
onmouseout="this.src='http://www.retelevise.com/wp-content/themes/myownzee/
branding/socialmedia-facebook-1.png'"
class="social-media-sidebar-icons" title="Facebook" alt="Facebook">
<span style="font-size: 0.8em">Facebook</span></a></span>

Answer 1

尝试移动onmouseover和onmouseout事件以锚定并更改“this”。通过ID引用img。

Answer 2

我对您完成此操作的方式做了一些更改：

将您的样式和javascript移动到外部文件
使用JQuery进行动画制作（更简单）

此版本现在使用多个图像。

<强> JSFiddle DEMO

<强> HTML：

<span class="sm">
   <a href="#" class="mediaLink">
        <img class="mediaPic" data-hover="http://placehold.it/60/4477ee/ffffff" src="http://placehold.it/60/224499/ffffff"/>
        <div class="mediaText"> Facebook</div>
    </a>
</span>
<span class="sm">
   <a href="#" class="mediaLink">
        <img class="mediaPic" data-hover="http://placehold.it/60/ee9933/ffffff" src="http://placehold.it/60/777777/ffffff"/>
        <div class="mediaText"> Stack Overflow</div>
    </a>
</span>
<span class="sm">
   <a href="#" class="mediaLink">
       <img class="mediaPic" data-hover="http://placehold.it/60/66aaff/ffffff" src="http://placehold.it/60/3388aa/ffffff"/>
        <div class="mediaText"> Twitter</div>
    </a>
</span>
<span class="sm">
   <a href="#" class="mediaLink">
        <img class="mediaPic" data-hover="http://placehold.it/60/dd1122/ffffff" src="http://placehold.it/60/991122/ffffff"/>
        <div class="mediaText"> YouTube</div>
    </a>
</span>

JavaScript（使用JQuery）：

$(document).ready( function() {
    $(".mediaLink").on( {
        mouseenter: function() {  
            $(this).children(".mediaPic").data("static", $(this).children(".mediaPic").attr("src"));
            $(this).children(".mediaText").css("color", "orange");
            $(this).children(".mediaPic").attr("src", $(this).children(".mediaPic").data("hover"));

        }, mouseleave: function() {

            $(this).children(".mediaText").css("color", "white");
            $(this).children(".mediaPic").attr("src", $(this).children(".mediaPic").data("static"));
        }
    });

});

<强> CSS：

.mediaLink {
    display: block;
}

.mediaPic {
    float: left;
    width, height: 60px;
}

.mediaText {
    height: 60px;
    width: 150px;
    padding-left: 10px;
    line-height: 60px;
    background: #242424;
    color: white;
    font-family: "Consolas"," Arial";
    font-size: 18px;
    float: left;
}

.sm {
    margin: 5px;
    float: left;
}

说明：

我将<a>更改为children（.mediaPic和.mediaText），当它被徘徊时。在mouseenter上，当鼠标悬停在上方时，mouseleave会将<a>恢复为常规状态。

名为data-hover的部分是您要将图片设置为的图片的网址，您将src作为默认图像。当您将鼠标悬停在图像上时，脚本将会记住＆＃34;原始src并在您离开图片（mouseleave）时将其重新设置为。

将MouseOn与CSS Link Hover结合使用

2 个答案:

说明：