Атрибуты доступа из CSS

Я новичок в HTML, и я пробую кое-что на странице, которую я пишу. Я использую Notepad в качестве редактора, так как он был рекомендован для начинающих от w3schools. У меня есть панель навигации, где я намерен показать dropdownmenu, когда моя мышь находится над опцией меню (Hover), в данном случае «Подарки». В настоящее время я изучаю HTML с CSS, и я еще не хочу использовать какой-либо другой код (например, javascript и т. Д.). Вот мой HTML код:Атрибуты доступа из CSS

<body> 
     <div id="body"> 
      <div id="header"> 
      </div> 
      <div id="navigation"> 
       <a href="home.html">Home</a> 
       <a id="gifts" href="gifts.html">Gifts</a> 
       <div id="giftsDropDownList" hidden="true"> 
        <a href="live-gifts.html">Live Gifts</a> 
        <a href="upcoming-gifts.html">Upcoming Gifts</a> 
        <a href="previous-gifts.html">Previous Gifts</a> 
       </div> 
       <a href="about.html">About</a> 
       <a href="register.html">Register</a> 
       <a href="log-in.html">Log in</a> 
      </div> 
      <div id="section"> 
      </div> 
      <div id="footer"> 
       Visit us on <a href="http://www.facebook.com/WinLOLGifts">Facebook</a>/
       <a href="http://twitter.com/WinLOLGifts">Twitter</a> 
      </div> 
     </div> 
    </body>

Вот мой CSS код:

body 
{ 
    background-color: lightgrey; 
} 
div#body 
{ 
    margin: auto; 
    width: 810px; 
} 
div#header 
{ 
    height: 150px; 
    background-color: red; 
    text-align: center; 
    padding: 5px; 
} 
div#navigation 
{ 
    float: left; 
    height: 500px; 
    background-color: #282828; 
} 
div#navigation a 
{ 
    display: block; 
    width: 150px; 
    text-align: center; 
    text-decoration: none; 
    background-color: #282828; 
    color: #FFF; 
    padding: 5px; 
    margin: auto; 
} 
div#navigation a:hover 
{ 
    background-color: #D96915; 
} 
div#navigation a:visited 
{ 
    color: #FFF; 
} 
div#section 
{ 
    background-color: green; 
    float: left; 
    width: 650px; 
    height: 500px; 
} 
div#footer 
{ 
    width: inherit; 
    background-color: brown; 
    text-align: center; 
    color: #FFF; 
} 
div#footer a 
{ 
    text-decoration: none; 
    color: #FFF; 
    padding: 5px; 
} 
div#footer a:visited 
{ 
    color: #FFF; 
} 
div#giftsDropDownList a 
{ 
    width: 130px; 
}

Как вы можете видеть, я использую атрибут скрытый = «истина», и я не знаю, как получить доступ к этому атрибуту из CSS. Любая помощь, пожалуйста?

источник

2015-02-24 etritbujupi

Вы не можете изменить атрибут с помощью CSS. –

Remove {скрыт = "истина"} из HTML и добавить в свой CSS:

#giftsDropDownList{ 
    display:none; 
} 

#gifts:hover + #giftsDropDownList{ 
    display:block; 
}

источник

2015-02-24 12:37:09 johanthuresson

Это сработало. Большое спасибо! – etritbujupi

У вас есть 2 варианта:

индикаторный блок/нет

a#giftsDropDownList { 
    display:none; /* this will hide the dropdownlist */ 
} 
#gifts:hover #giftsDropDownList { 
    display:block; /* this will show the dropdownlist */ 
}

Или вы могли бы использовать видимый видимость/скрытые

a#giftsDropDownList { 
    visibility:hidden; /* this will hide the dropdownlist */ 
} 
a#gifts:hover #giftsDropDownList { 
    visibility:visible; /* this will show the dropdownlist */ 
}

Надежда это помогает!

источник

2015-02-24 12:16:23

Какой вариант будет реплицировать функциональность атрибута 'hidden = true'? –

div «giftsDropDownList» должен быть видимым/скрытым только тогда, когда указатель мыши находится над «подарками» – etritbujupi

Атрибуты доступа из CSS

ответ

Смежные вопросы