Question

当我将文本输入（文本框）悬停时，文本框周围会出现黑色的东西。这是它的样子：

有谁知道如何修复它？首先我有一个按钮，当我按下按钮时它发生了同样的事情。可能是PHP的东西吗？

CSS：

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

body {
    font-family: 'Source Sans Pro';
}

#wrapper {
    width:100%;
    background-color:white;
    margin:auto;
}

h2 {
    font-size: 32px;
}

#top {
    width:100%;
    height:60px;
    border-style: solid;
    border-width: 1px;
}

#logo {
    clear:left;
    border-style: solid;
    border-width: 1px;
    width:30%;
    float:left;
    height:60px;
}

#nav {
    clear:right;
    width: 100%;
    border-width: 0px;
    float:right;
    height:60px;
}

#content
{
    width:97.9%;
    min-height:400px;
    border-style: solid;
    border-width: 1px;
    padding:20px;
}

#footer {
    height:100px;

}

.divider1 {
   display: block;
   float: left;
   padding: 0;
   margin: 8px auto;
   height: 0;
   width: 90%;
   max-height: 0;
   font-size: 1px;
   line-height: 0;
   clear: both;
   border: none;
   border-top: 1px solid #aaaaaa;
   border-bottom: 1px solid #ffffff;
}

.bp {
    float: left;
    margin-left: 30px;
    margin-top: 30px;
    width: 60%;
}

/* Navigation Menu
---------------------------------*/

ul ul {
display: none;
background: #00B6ED;
}
ul li:hover > ul {
display: block;
}
ul {
background: #00B6ED;
border-radius: 2px;
list-style: none;
position: relative;
margin-top: 0px;
padding-top: -25px;
margin-left: -8px;
}
ul:after {
content: "";
clear: both;
display: block;
}
ul li {
float: left;
}
ul li:hover {
background: #404040;
}
ul li:hover a {
color: #fff;
}
ul li a {
display: block;
padding: 8px 5px;
color: #FFF;
text-decoration: none;
height: 25px;
font-size: 20px;
margin: 10px;
margin-top: 10px;
}
ul ul { /* Hover menu */
background: #6B6B6B;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
margin-top: 0px;
margin-left: 0px;
}

ul ul li {
float: none;
border-top: 1px solid #6B6B6B;
position: relative;
}
ul ul li a {
color: #fff;
height: 30px;
margin-bottom: 0px;
}
ul ul li a:hover {
background: #404040;
height: 30px;
margin-bottom: 0px;
}
ul ul ul {
position: absolute;
left: 100%;
height: 35px;
top: 0;
}
.js-enabled ul li:hover > ul {
display: none;
}

.menu-hover {
margin-left: 0px;
width: 100%;
margin-top: 0px;
}

#query {
    background: #FFF url("http://tutorialnom.grn.cc/sicon.png") no-repeat scroll 3px 2px;
    margin-left: 63%;
    border: 1px solid #999;
    font-size: 15px;
    outline:0; 
    padding-left: 25px;
    height:25px; 
    width: 275px;
    float: right;
    margin-top: 15px;
}

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic' rel='stylesheet' type='text/css'>

<script type="text/javascript">
$(document).ready(function (){
$('.menu-hover').jVanilla({
speed   : 10, //  the speed of animations
animation   : 'sliding', // sliding or fading
eventType   : 'hover', // hover or click
delay   : 100, // the delay time on mouseout
isHoverClickable: true, // set to true if you want to enable the click on the first level link
isLastRightAlign: true // set to false if you want to align left the last submenu 
});
});
</script>

</head>
<body>
<div id="wrapper">
<div id="nav">
<nav>
<ul class="menu-hover">
<li> <a href="index.php"> Home </a> </li>
<li> <a href="downloads.php" id="dd"> Downloads </a>
<ul>
<li><a href="paddis-skypetools.php">Paddis SkypeTools</a></li>
<li><a href="greatzip.php">GreatZip</a></a></li>
<li><a href="pczip-cleaner.php">Pc Zip Cleaner</a></a></li>
</ul>
</li>
<li> <a href="forums.php"> Forums </a></li>
<li> <a href="youtube.php"> YouTube </a> </li>
<li> <a href="contact.php"> Contact </a>

<li>

<form class="searchForm" action="search.php" method="GET">
     <input type="text" autocomplete="off" name="q" id="query" class="shape-search" />
     <div>
      <!-- <button class="shape-search">Q</button> -->
     </div>
     </form>

</li>
</ul>
</nav>
</div>
</div>

Answer 1

您在CSS中的hover标记上有<li>个属性。因为您将表单作为列表项，所以当您将鼠标悬停在其上时，它也会给出背景颜色更改。

删除（或注释掉）

ul li:hover {
background: #404040;
}

然后在下一行更改此内容：

ul li:hover a {
color: #404040;  /* the color was #fff */
}

这里是working demo。

Answer 2

因为您拥有此类hover

ul li:hover {
   background: #404040;
}

和margin-top 15px允许black颜色可见。将query类的 CSS 替换为：

#query
{
    background: #FFF url("http://tutorialnom.grn.cc/sicon.png") no-repeat scroll 3px 2px;
    border: 1px solid #999;
    font-size: 15px;
    outline:0; 
    padding-left: 25px;
    height:25px; 
    width: 275px;
    float: right;
    margin-top: 15px;
    position:fixed;
}

您需要设置positioned:fix并删除margin-left

<强> DEMO

悬停时文本输入周围的黑色

2 个答案: