猿问

纯CSS关于display的用法

网页中一段内容之后只显示三角图片而鼠标移动到或者点击这个三角符号之后变成倒三角567a56e30001066a00100010.jpg,同时隐藏此三角符号,并且显示一个下拉列表出来

567a56e300012ecf02200280.jpg

本人是初学者,不用javascript.

只用display元素如何实现


一万年的距离
浏览 1395回答 2
2回答

雾青依

感觉和那种导航差不多,我在这里贴一段导航的代码吧,不美观啊,勿喷<html> <head> <title></title> <style> *{ margin:0; padding:0; } #nav{/*把列表符号去掉*/ list-style:none; } #nav li ul{/*隐藏下拉内容*/ display:none; list-style:none; margin:0px; } #nav li{/*定义一级导航样式*/ color:red; width:200px; background:yellow; } #nav li ul li{/*定义下拉内容样式*/ background:green; margin-bottom:5px; } #nav li:hover{ color:red; } #nav li:hover ul{/*鼠标移到一级导航上方的时候显示下拉内容*/ display:block; } #sp{ float:right; } </style> </head> <body> <ul id="nav"> <li>导航<span id="sp">三角</span> <ul> <li>导航一 </li> <li>导航二 </li> <li>导航三 </li> </ul> </li> </ul> <body> </html>

迷途的马尔斯

用到伪类选择器(:hover)就好了,鼠标移动到的时候是hover的样式
随时随地看视频慕课网APP
我要回答