從CSS訪問屬性

我是HTML新手，我正在嘗試寫一些頁面上的東西。我使用記事本作爲編輯器，因爲它建議初學者從w3schools。我有一個導航欄，我打算在鼠標懸停在菜單選項（懸停）上時顯示下拉菜單，在這種情況下爲「禮物」。我目前正在使用CSS學習HTML，並且我不希望使用任何其他代碼（如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改變屬性。 – 2015-02-24 12:11:18

刪除HTML {隱藏= 「真」}，並添加到您的CSS：

#giftsDropDownList{ 
    display:none; 
} 

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

來源

2015-02-24 12:37:09 johanthuresson

這有效。非常感謝你！ – etritbujupi 2015-02-24 12:43:33

你有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'屬性的功能？ – 2015-02-24 12:18:50

div「giftsDropDownList」只有當我的鼠標指針位於「禮物」上時才應該可見/隱藏 – etritbujupi 2015-02-24 12:19:52

從CSS訪問屬性

回答

相關問題