отменя ефекта от задържането на курсора на мишката за един бутон в лентата за навигация

Имам лента за навигация, която има черен фон с бял текст. Текстът се променя в червено при задържане на курсора на мишката. обаче, когато потребителят е на избраната страница, този специфичен фон ще се промени на червен. но при задържане на курсора на мишката текстът става червен. Искам така, че когато потребителят е на началната страница и задържи курсора на мишката над началния бутон, текстът да не се променя в червено.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TL Custom Printing</title>

<link rel="stylesheet" type="text/css" href="/bgstylesheet.css" />


</head>

<body>

<div id="topbar">
</div>

<div id="navbar">
    <div id="navbtn">
        <ul>
            <li><a href="/bgindex.php" style="background-color:#F00;">Home</a></li>
            <li><a href="/bgcustom.php" >Custom Printing</a></li>
            <li><a href="/bgstore.php">Products</a></li>
            <li><a href="/bggallery.php">Gallery</a></li>
            <li><a href="/bgabout.asp">About</a></li>
            <li><a href="/bgcontact.asp">Contact Us</a></li>
        </ul>
    </div>
</div>

<div id="logo">
    <img src="testlogo.png" alt="logo">
</div>



</body>

</html>

CSS:

#navbtn {
    width:100%;
    Margin:20px;
    white-space: nowrap;
    text-align:center
}

ul {
    width:100%;
    list-style:none;
    margin:0;
    padding:0;
    display: inline-block;
    padding-top: 2.25em;
}

li {
    width: 140px;
    display: inline-block; 
}

a {
    text-align:center;
    font-size: 1.25em;
    padding:8px 0;
    display:block;
    width:100%;
    text-decoration:none;
    color:#FFF;
    border-top-left-radius:8px;
    border-top-right-radius:8px;

}

a:hover {
    color:#F00;
    background-color:#000;
}

navigation html css html-lists
person Ross Watson    schedule 14.07.2014    source източник
comment
И така, как да зададете bg-color на 'текущата' страница? Не е вградено, както сте посочили тук... нали?   -  person Paulie_D    schedule 14.07.2014
comment
Точно сега сте го направили с вграден CSS, който няма да реагира, но най-вероятно можете да постигнете това, като използвате псевдокласа :active.   -  person TylerH    schedule 14.07.2014
comment
:active работи само с mousedown...не показва текущата страница.   -  person Paulie_D    schedule 14.07.2014

Отговори (2)


arrow_upward
1
arrow_downward

Можете да използвате активен клас, за да поправите това лесно: JSFiddle

<li><a href="/bgindex.php" class="active">Home</a></li>

a.active {
    background-color:#F00;
}
a.active:hover {
    color: #fff;
}

Добавих също цвета на фона на вашия активен раздел в класа .active, премахвайки вашия вграден стил

person JRulle    schedule 14.07.2014
comment
+1. След това можете да използвате повторно class="active" на която и да е от вашите връзки към раздели за други страници, така че всяка страница да може да бъде активна, когато се показва. - person Kinnectus; 14.07.2014

arrow_upward
0
arrow_downward

Можете да добавите:

<style type="text/css">
    a:hover {
    color:#FFF !important;
    background-color:#000;
    }
</style>

Във вашите html страници, но във вашия "дом", така че ще пренапише основния css лист.

person Alvaro Menéndez    schedule 14.07.2014