Question

因此，我在页面上有一封电子邮件链接，当您将鼠标悬停在该链接上时，该链接应该从其基本颜色（浅绿色）过渡为深绿色。我已经确认它可以在Chrome，IE，Edge和Opera中运行。它仅在Firefox中不起作用。当鼠标悬停在链接底部时，它也具有相同的功能，在链接底部带有边框，并且在Firefox中可以正常工作，但由于某种原因，链接的颜色不佳。任何帮助，将不胜感激。这是我的代码：

HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <!-- This is so viewing website is scaled well on all devices -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- This is where I am getting all my icons from -->
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
        <!-- Image by fontawesome.com. Here is link to image: https://fontawesome.com/icons/info-circle?style=solid -->
        <link rel="icon" href="Images/info-circle-solid.png">
        <!-- To remove default browser styling -->
        <link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.0/normalize.css">
        <!-- My style sheet -->
        <link rel="stylesheet" href="css/style.css">
        <!-- My Sass style sheet -->
        <link rel="stylesheet" href="css/sass_style.css">
        <!-- JQuery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <!-- My script -->
        <script src="JavaScript/javascript.js"></script>
        <title>About</title>
    </head>
    <body>
                        <!-- Email section -->
                    <section>
                        <div class="component-div_margin component-div_width">
                            <h2 class="component-div_margin_h2_after_description">Contact</h2>
                            <p>Here is my email if you wish to contact me. Click on my email address below to copy the address to your clipboard.</p>
                            <a href="javascript:;" class="component-div_margin__email_color" id="green_email_one" onclick="CopyEmail('green_email_one')">chadwilson959@yahoo.com</a>
                        </div>
                    </section>
    </body>
    </html>

CSS：

/* Color palette courtesy of colorlovers.com. Here is the direct link to the color palette:
http://www.colourlovers.com/web/trends/websites/7853/KICKSTARTER */
/* Design inspiration courtesy of Timmy O'Mahony from his portfolio website. Here is the link to it:
http://www.colourlovers.com/web/trends/websites/7853/KICKSTARTER */

body {
    font-family: Arial, Helvetica, sans-serif;
}

h1,h2,h3,h4,h5,h6,p {
    margin: 0;
    font-weight: normal;
}

/* .component-footer_background_color__email_border_color:
this is to add a margin to the bottom of the green email in the footer */
h1,h2,h3,h4,h5,h6,p,
.component-footer_background_color__email_border_color {
    margin-bottom: 20px;
}

h1,h2,h3,h4,h5,h6,p,a {
    color: #34302D;
}

h1 {
    font-size: 30px;
}

h2 {
    font-size: 20px;
}

a {
    text-decoration: none;
    border-bottom: 1px solid white;
}


/* To create spacing between borders of webpage and spacing inbetween 
seperate divs on the page */
.component-div_margin {
    margin: 5% 5% 120px 5%;
}

.component-footer_background_color__a,
#wider_screen_drop_down_menu_email,
.component-div_margin_h2_after_description,
.component-footer_background_color__a {
    color: #E6E6E6;
}

/* !important to remove previous color styling */
.component-header__left-div__nav_active_a,
.component-div_margin__email_color,
a:hover,
.wider_screen_size_header_navigation_nav a:hover {
    color: #86C543 !important;
}

/* So these animations do not repeat */
.component-drop_down_menu_open_animation,
.component-drop_down_menu_close_animation,
.component-drop_down_menu_show_animation,
.component-drop_down_menu_hide_animation,
.from_black_to_green_border_animation,
.green_email_one_border_animation {
    animation-fill-mode: forwards;
}

.from_black_to_green_border_animation,
.green_email_one_border_animation {
    animation-duration: .3s;
}

.green_email_one_border_animation {
    animation-name: green_email_one_border;
}

/* #component-description_div__h2 has this to create more spacing
in the intro */
p, #component-description_div__h2 {
    line-height: 30px;
}

/* To put anchor tags on seperate lines */
nav a:after {
    content: "";
    display: block;
    height: 0;
    width: 1px;
}

/* To add seperation between links inside of navs when they are on seperate lines */
nav {
    line-height: 50px;
}

@keyframes green_email_one_border {
    from {
        color: #86C543;
        border-bottom-color: #86C543;
    }
    to {
        color: #6B9E35;
        border-bottom-color: #6B9E35;
    }
}


/* lines 335 - 418 */
/* MEDIA QUERIES */


@media only screen and (min-width: 480px) {
    .wider_screen_size_header_navigation {
        display: block;
    }
    .open_menu_div {
        display: none;
    }
    .component-header__left-div {
        width: 50%;
    }
    .component-header__right-div {
        width: 50%;
    }
    .projects_link {
        margin-right: 0px !important;
    }
}

@media only screen and (min-width: 768px) {
    .component-header__left-div {
        width: 25%;
    }
    .component-header__right-div {
        width: 75%;
    }    
    .projects_link {
        margin-right: 25px !important;
    }
    #wider_screen_drop_down_menu_email {
        display: inline;
        margin-right: 0px !important;
    }
    .mobile_footer_div {
        display: none;
    }
    .component-footer_background_color__div {
        width: 50%;
    }
    .wider_screen_footer_div {
        display: block;
    }
    .component-footer_background_color__h2_after_first {
        margin-bottom: 35px;
    }
    .component-footer_background_color__first_div {
        width: 60%;
    }
    .component-footer_background_color__nav {
        line-height: 30px;
    }
    .contact_header {
        margin-bottom: 40px;
    }
}

@media only screen and (min-height: 537px) {
    .intro_div {
        margin-bottom: 240px;
    }
}

@media only screen and (min-width: 1000px) {
    .wider_screen_footer_div {
        display: none;
    }
    .widest_screen_footer_div {
        display: flex;
    }
    .wider_screen_footer_div_flex {
        width: 60%;
    }
    .component-footer_background_color__div {
        width: 25%;
    }
    .social_div_width {
        width: 40%;
    }
    .component-footer_background_color__first_div {
        width: 30%;
    }
    .component-div_width {
        width: 60%;
    }
}

JavaScript：

//This function is to copy the emails on each page to the clipboard and to style the link
//once it is clicked when the emails are clicked.
function CopyEmail(id) {
    var range = document.createRange();
    var selection = window.getSelection();
    SelectEmailCopying(id, range);
    RemoveAllRanges(selection);
    selection.addRange(range);
    document.execCommand('copy');
    RemoveAllRanges(selection);
}

//this function creates the range for the text of the email that is to be copied.
function SelectEmailCopying(id, range) {
    if(id === "green_email_one") {
        range.selectNodeContents(document.getElementById('green_email_one'));
    }
    else if(id === "green_email_two") {
        range.selectNodeContents(document.getElementById('green_email_two'));
    }
    else if(id === "grey_email_one") {
        range.selectNodeContents(document.getElementById('grey_email_one'));
    }
    else if(id === "grey_email_two") {
        range.selectNodeContents(document.getElementById('grey_email_two'));
    }
    else if (id === "grey_email_three") {
        range.selectNodeContents(document.getElementById('grey_email_three'));
    }
    else if(id === "drop_down_menu_email") {
        range.selectNodeContents(document.getElementById('drop_down_menu_email'));
    }
    else if(id === "wider_screen_drop_down_menu_email") {
        range.selectNodeContents(document.getElementById('wider_screen_drop_down_menu_email'));
    }
}

//This function removes all ranges once copying is done.
function RemoveAllRanges(selection) {
    selection.removeAllRanges();
}

$(document).ready(function() {
    //Gives animation to the last email link before hitting the footer on hover
    $("#green_email_one").hover(function() {
        $("#green_email_one").addClass("green_email_one_border_animation");
    }, function() {
        $("#green_email_one").removeClass("green_email_one_border_animation");
    });
});

以及此代码的JSFiddle链接： https://jsfiddle.net/qb0d6caL/12/

谢谢。

Answer 1

您的这部分代码带有.component-header__left-div__nav_active_a, .component-div_margin__email_color, a:hover, .wider_screen_size_header_navigation_nav a:hover { color: red !important;//I added red as color for testing }。

{{1}}

只需删除重要

链接的颜色过渡在Firefox中不起作用

1 个答案: