html+css+jquery鼠标经过和点击显示

来源：互联网 2023-03-16 19:10:08 版权归原作者所有，如有侵权，请联系我们

html css jquery鼠标经过和点击显示

工具/原料

adobe dreamweaver

方法/步骤

准备好需要用到的图标。

html css jquery鼠标经过和点击显示

新建html文档。

html css jquery鼠标经过和点击显示

书写hmtl代码。div style="float:left" > strong> 鼠标点击 /strong>/ div id="firstpane" class="menu_list"> p class="menu_head">Header-1/ div class="menu_body"> a href="#">Link-1/a> a href="#">Link-2/a> a href="#">Link-3/a> /div> p class="menu_head">Header-2/ div class="menu_body"> a href="#">Link-1/a> a href="#">Link-2/a> a href="#">Link-3/a> /div> p class="menu_head">Header-3/ div class="menu_body"> a href="#">Link-1/a> a href="#">Link-2/a> a href="#">Link-3/a> /div> /div>/div>div style="float:left; margin-left:20px;"> strong> 鼠标经过 /strong>/ div class="menu_list" id="secondpane"> p class="menu_head">Header-1/ div class="menu_body"> a href="#">Link-1/a> a href="#">Link-2/a> a href="#">Link-3/a> /div> p class="menu_head">Header-2/ div class="menu_body"> a href="#">Link-1/a> a href="#">Link-2/a> a href="#">Link-3/a> /div> p class="menu_head">Header-3/ div class="menu_body"> a href="#">Link-1/a> a href="#">Link-2/a> a href="#">Link-3/a> /div> /div>/div>

html css jquery鼠标经过和点击显示

书写css代码。style>body { margin: 10px auto; font: 75%/120% Verdana, Arial, Helvetica, sans-serif; }.menu_list { width: 150px; }.menu_head { padding: 5px 10px; cursor: pointer; position: relative; margin:1px; font-weight:bold; background: #eef4d3 url(left.png) center right no-repeat; }.menu_body { display:none; }.menu_body a { display:block; color:#006699; background-color:#EFEFEF; padding-left:10px; font-weight:bold; text-decoration:none; }.menu_body a:hover { color: #000000; text-decoration:underline; }/style>

html css jquery鼠标经过和点击显示