我希望了解zazzle.com如何悬停效果。我想使用纯CSS制作效果。我不需要下拉元素的整个背景来改变颜色。
/* the styles for the HTML elements */
html {
background: repeating-linear-gradient(#f3f3f3 0%,transparent 15%, transparent 90%,#000000 100% ),
url("../Images/bg.jpg") center center no-repeat;
background-size: cover;
height:135%;
}
body {
margin:0;
padding:0;
font-family: Arial, Helvetica, sans-serif;
}
footer{
clear: both;
margin-top: 1em;
padding-right: 1em;
border-top: 2px solid rgb(119, 75, 77);
}
footer p {
text-align: right;
font-size: 80%;
margin: 1em 0;
}
header{
width: 100%;
overflow: hidden;
height: 60px;
line-height: 60px;
position: relative;
background-color: #3a3a3a;
margin: 0;
}
#headerLeft{
width:50%;
float:left;
padding:0;
margin: 0;
}
#headerRight{
width: 50%;
float:left;
text-align: right;
padding:0;
margin: 0
}
li{
display: inline;
}
nav li:hover{
background-color: #ffffff;
}
.floatRight{
}
nav li{
margin: 0;
padding-bottom: .25em;
display: inline;
}
textarea {
width: 25em;
margin-bottom: .5em;
}
table {
border-collapse: collapse;
}
td, th {
margin: 0;
padding: .15em 0;
}
br {
clear: both;
}
/* the styles for the div tags that divide the page into sections */
#content {
float: left;
width: 580px;
padding-bottom: 1.5em;
}
#left_column {
float: left;
width: 150px;
padding-left: .5em;
}
#right_column {
float: left;
width: 300px;
padding-left: 1em;
}
#wrapper{
background-color: #ffffff;
opacity: .6;
margin: 0 auto;
padding: .5em 2em;
}
/********************************************************************
* styles for the classes
********************************************************************/
.right {
text-align: right;
}
.left {
text-align: left;
}
.cart_qty {
text-align: right;
width: 3em;
}
.button_form {
margin: 0;
padding: 0;
float: left;
}
.inline {
display: inline;
margin-left: .5em;
}
/********************************************************************
* Styles for the Product Manager application
********************************************************************/
#category_table form {
margin: 0;
}
#category_table td {
margin: 0;
padding: .15em .5em 0 0;
}
#add_category_form {
margin: 0;
}
#add_category_form input {
margin-right: .5em;
}
#add_admin_user_form label {
width: 8.5em;
}
#edit_and_delete_buttons {
margin-bottom: .5em;
}
#edit_and_delete_buttons form {
display: inline;
}
#image_manager input {
margin: .25em;
}
/********************************************************************
* Styles for the Product Catalog application
********************************************************************/
#product_image_column {
width: 8em;
text-align: center;
}
/*******************************************************************/
#add_to_cart_form {
margin: .25em;
}
#add_to_cart_form input {
float: none;
}
/*******************************************************************/
#cart {
margin: 0;
padding: 1em .25em;
border-collapse: collapse;
width: 100%;
}
#cart_header th {
border-bottom: 2px solid black;
}
#cart_footer td {
border-top: 2px solid black;
font-style: bold;
}
#cart td {
padding: .25em 0;
}
/*******************************************************************/
#login_form label {
width: 5em;
padding-right: 1em;
}
#login_form input[text] {
}
#payment_form label {
width: 8em;
padding-right: 1em;
}
#payment_form input[text] {
width: 5em;
margin: 0;
padding-right: 1em;
}
#add_category label {
text-align: left;
width: 3em;
}
#add_category input {
margin-right: .25em;
}
<?php
require_once('model/database.php');
require_once('model/category_db.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- the head section -->
<head>
<title>Willie's Fishing Supply</title>
<link rel="stylesheet" type="text/css"
href="<?php echo $app_path ?>main.css" />
</head>
<!-- the body section -->
<body>
<header>
<ul>
<section id="headerLeft">
<li>
<a href="<?php echo $app_path; ?>">
<h1>Willie's Fishing Supply</h1>
</a>
</li>
</section>
<section id="headerRight">
<?php
// Check if user is logged in and
// display appropriate account links
$account_url = $app_path . 'account';
$logout_url = $account_url . '?action=logout';
if (isset($_SESSION['user'])) :
?>
<li>
<a href="<?php echo $account_url; ?>">My Account</a>
</li>
<li>
<a href="<?php echo $logout_url; ?>">Logout</a>
</li>
<?php else: ?>
<li>
<a href="<?php echo $account_url; ?>">Login/Register</a>
</li>
<?php endif; ?>
<li>
<a href="<?php echo $app_path . 'cart'; ?>">Cart</a>
</li>
</section>
</ul>
</header>
<nav>
<ul><?php
$categories = get_categories();
foreach($categories as $category) :
$name = $category['categoryName'];
$id = $category['categoryID'];
$url = $app_path . 'catalog?category_id=' . $id;
?>
<li>
<a href="<?php echo $url; ?>">
<?php echo $name; ?>
</a>
</li>
<?php endforeach; ?>
</ul>
</nav>
<section id = "wrapper">
答案 0 :(得分：0)
试试这个css
.aj_R-departmentLinks > li:hover {
background: none repeat scroll 0 0 #FFFF00;
}
答案 1 :(得分：0)
如果要更改元素的背景颜色，请使用：hover选择器
.element {
background-color: blue;
}
.element:hover {
background-color: red;
}