悬停时的CSS链接背景颜色

时间:2017-03-12 02:24:02

标签: css hyperlink hover

我有这段代码

<nav><details><summary>Pests</summary><ul>
    <li><a href="somewhere">Bugs</a></li>
    <li><a href="">Rodents</a></li></ul>
</details></nav>

用这个css

nav > details li:hover{background-color:white}
details > ul{list-style:none;background-color:orange;padding-left:15px;margin:0 15px}

当我将鼠标悬停在链接上时,剩下一小段橙色背景。如何更改代码以使整个行背景变为白色?我尝试过取出填充等的变体,但是会以不必要的方式改变空间格式。没什么帮助。感谢。

2 个答案:

答案 0 :(得分:0)

你可以尝试:

   nav > details li{padding-left: 15px;}
   nav > details li:hover{background-color:white;}
   details > ul{list-style:none;background-color:orange;padding-left:0;margin:0 15px}

答案 1 :(得分:-1)

从您的UL元素中删除默认A 相反,请设置nav > details > ul { background: orange; list-style: none; margin: 0; /* you don't need that user agent styles margin. Null it */ padding: 0; /* you don't need that user agent styles padding. Null it */ } /* instead style your a elements */ nav > details li a { display: block; /* make it block-level */ padding: 5px 15px; transition: 0.3s; /* smooth transition */ } nav > details li a:hover { background: white }元素的样式:

&#13;
&#13;
<nav>
  <details>
    <summary>Pests</summary>
    <ul>
      <li><a href="somewhere">Got Bees?</a></li>
      <li><a href="">Wasps, Hornets &amp; Yellow Jackets</a></li>
      <li><a href="">Got it?</a></li>
    </ul>
  </details>
</nav>
&#13;
<?php
include_once("createConnection.php");
session_start();
$checkbox = $_POST['name'];
$checked = $_POST['checked'];
$currentUser = $_SESSION['validUser'];

if($checked=='yes'){
    $request='UPDATE projectDB.Members 
        SET :name=1 WHERE username=:currentUser';
    $preparedStatement = $bdd->prepare($request); 
    $preparedStatement->bindParam(':name', $checkbox, PDO::PARAM_STR);
    $preparedStatement->bindParam(':currentUser', $currentUser, PDO::PARAM_STR);
    $preparedStatement->execute();
}
else{
    $request='UPDATE projectDB.Members 
        SET :name=0 WHERE username=:currentUser';
    $preparedStatement = $bdd->prepare($request); 
    $preparedStatement->bindParam(':name', $checkbox, PDO::PARAM_STR);
    $preparedStatement->bindParam(':currentUser', $currentUser,     PDO::PARAM_STR);
    $preparedStatement->execute();
}
?>
&#13;
&#13;
&#13;