时间戳

首页 > 解决方案 > 背景和悬停效果

html - 背景和悬停效果

问题描述

我正在尝试使上述文本（家庭帮助客户等）类似于下面Home的文本，并且全部在带有白色文本和hover效果的绿色框中，但我无法添加绿色background并使单词显示类似于下面的一次hover效果我已经尝试了一些东西，但它并没有帮助我，我也尝试了很多将购物车移动到右上角以使其看起来像一个普通的购物网站，但如果你们看到任何错误，它就不起作用或改进它的建议我真的很感激，因为我是初学者 https://imgur.com/2Bhxzs2

帮助修复顶部header请参考图片链接，因为它显示的正是绿色框，谢谢图片有网站的标题，如果有不同的按钮，比如来宾客户帮助等，我正在努力让它像那个在带有悬停效果的绿色框下方

<html>

<head>
  <title>Rajeshri Traders </title>
  <link href="CSS/style.css" rel="stylesheet">

</head>

<body>
  <div id="wrapper">
    <div id="header">
      <div id="subheader">
        <div class="container">
          <p> CCTV Supplier</p>
          <a href="#">Guest </a><a href="#">Consumer </a><a href="#">Download App </a>
          <a href="#">Help </a>
        </div>
      </div>
      <!--==main header==-->
      <div id="main-header">
        <!--logo-->
        <div id="logo">
          <span id="ist"></span><span id="iist"> Rajshri  Traders</span>
        </div>
        <!--==search area==-->
        <div id="search">
          <form action="">
          </form>
          <input class="search-area" type="text" placeholder="Search here">
          <input class="search-btn" type="submit" value="SEARCH">
          <!--="user-menu"==-->
          <div id="user menu">
          </div>
          <li><a href="#">Cart</a>
            <li><a href="#">Login</a>
        </div>
      </div>
    </div>
    <!----=====navigation bar==--->
    <div id="navigation">
      <nav>
        <a href="#">Home</a>
        <a href="#">New Arrivals</a>
        <a href="#">Products</a>
        <a href="#">Deals</a>
        <a href="#">Accesories</a>
        <a href="#">Order</a>
      </nav>
    </div>
  </div>

</body>

</html>

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

#wrapper {
  font-family: tahoma;
}


/*logo styling*/

#main-header {
  width: 100%;
  height: 125px;
  background: #93A7FF;
  display: flex;
  flex-wrap: no-wrap;
}

#main-header > div {
  flex: 1 1 0;
}

#ist {
  color: black;
  font-size: 65px;
  font-weight: bold;
  margin-left: 15px;
  font-family: fantasy;
}

#iist {
  color: black;
  font-size: 45px;
  font-weight: bold;
  margin-left: 15px;
  font-family: fantasy;
}


/*searchinga area styling*/

#search {
  padding: 20px;
  margin-left: 50px;
  text-align: center;
}

.search-area {
  width: 350px;
  height: 30px;
  background: #fff;
  border: none;
  border-radius: 10px;
  padding-left: 15px;
}

.search-btn {
 width: 65px;
  height: 34px;
  border-radius: 10px;
  border: none;
  color: #fff;
  background: brown;
  margin-left: 15px;
}


/*this is for user menu styling*/

#user-menu {
  margin-top: 20px;
  margin-right: 20px;
  text-align: right; 
}

#unser-menu ul {
 list-style-type: none;
  width: 100%;
}

#user-menu li {
  display: inline-block;
  padding: 0px 10px;
}

#main-header > div {
  flex: 1 1 0;
}


/*this style is for navigation bar */
#navigation{
    width: 100%;
    height: 35px;
background: #1aaa1a;
    float: left;
    box-shadow: 10px 14px 45px 3px #1aaa1a;

}
nav{
    width: 1200px;
    margin: 0 auto;    
}
nav a{
    margin-left: 35px;
    color: white;
    text-decoration: none;

}
nav a:hover{
    color:#000;
    transition: all .7s ease; 
}

标签： htmlcssstylesheet

解决方案

好的。所以你需要看看你对绿色框中的文本应用了什么样式。您需要复制您在#navigation 中使用的样式，这是绿色框中所有内容的容器。您已将链接包含在 nav 元素的绿色框中，然后按如下方式设置 nav 元素的样式：

nav{
    width: 1200px;
    margin: 0 auto;    
}
nav a{
    margin-left: 35px;
    color: white;
    text-decoration: none;

}
nav a:hover{
    color:#000;
    transition: all .7s ease; 
}

您需要以相同的方式在 .container div 中设置链接样式。最简单的方法是在导航元素中包含您的主页、帮助、客户链接，如下所示： 

<div class="container">
  <p> CCTV Supplier</p>
  <nav>
    <a href="#">Guest </a><a href="#">Consumer </a>                           
    <a href="#">Download App </a>
    <a href="#">Help </a>
  </nav>
</div>

推荐阅读