html - Put a backgound when hover a menu item -


i want create background-color or background-image when hover menu.

this part of code. when hover on item c, background color changes behind submenu without jquery.

@import "fonts.css";    body {    color: #fff;    margin: 0px;  }  .dropdownmenu{    height: 72px;    background: #ec008c;  }    .dropdownmenu ul, .dropdownmenu li {    margin: 0;    padding: 0;  }  .dropdownmenu ul {    background: gray;    list-style: none;    width: 100%;  }  .dropdownmenu li {    float: left;    position: relative;    width:auto;  }  .dropdownmenu {    color: #ffffff;    display: block;    padding: 24px 24px;    font-size: 21px;    text-align: center;    text-decoration: none;  }  .menu:hover {    background: #fff;    color: #ec008c;  }  #submenu {    left: 0;    opacity: 0;    position: absolute;    top: 72px;    visibility: hidden;    z-index: 1;    width: 235px;  }  li:hover ul#submenu {    opacity: 1;    visibility: visible;  }  #submenu li {    float: none;    width: 100%;  }  #submenu a:hover {    background: #eeeeee;    color:#ec008c;  }  #submenu {    background-color:#fff;    font-size: 16px;    font-family: "galaxie";    padding: 20px 24px 18px;    text-align: left;    color: #000;  }    #main{    -webkit-background-size: cover;    -moz-background-size: cover;    -o-background-size: cover;    background-size: cover;    background-repeat: no-repeat;    background-position: center center fixed;    width:100%;    height:640px;    background-color:#000;  }
<nav class="dropdownmenu">    <ul>    	<li><a href="#"></a></li>      <li class="menu"><a href="#">item a</a></li>      <li class="menu"><a href="#">item b</a></li>      <li class="menu"><a href="#">item c</a>        <ul id="submenu">          <li><a href="#">sub item</a></li>          <li><a href="#">sub item</a></li>                 </ul>      </li>      <li class="menu"><a href="#">item d</a></li>      <li class="menu"><a href="#">item e</a></li>    </ul>  </nav>      <div id="main"></div>

solution

function chbg(mask) {     document.getelementbyid('main').style.boxshadow = mask; }    <li  id="a" onmouseover="chbg('inset 0 0 0 1000px rgba(255,0,0,.2)')" onmouseout="chbg('none')" class="menu"><a href="#">itemc</a></li> 

what you're asking isn't possible purely css. because #main isn't nested with/a sibling of #submenu, can't select it. closest can is

.dropdownmenu:hover ~ #main  {     background-color:#cc0000; } 

use javascript apply class changes background color.


Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -