Kotak lungsur dengan kotak pilihan yang dilaksanakan oleh kemahiran js csss

Rumah

hujung hadapan web

tutorial js

Kotak lungsur dengan kotak pilihan yang dilaksanakan oleh kemahiran js csss_javascript

May 16, 2016 pm 04:34 PM

kotak drop down kotak semak

Rendering:

css:

&lt;style type="text/css"&gt; 
/* 带复选框的下拉框 */ 
ul li{ 
list-style: none; 
padding:0px; 
margin: 0px; 
} 

.select_checkBox{ 
border:0px solid red; 
position: relative; 
display:inline-block; 


} 
.chartQuota{ 
height:23px; 
float:left; 
display:inline-block; 
border:0px solid black; 
position: relative; 
} 

.chartOptionsFlowTrend{ 
z-index:300; 
background-color:white; 
border:1px solid gray; 
display:none; 
position: absolute; 
left:0px; 
top:23px; 
width:150px; 
} 
.chartOptionsFlowTrend ul{ 
float:left; 
padding: 0px; 
margin: 5px; 
} 
.chartOptionsFlowTrend li{ 
/* float:left; */ 
display:block; 
position: relative; 
left:0px; 
margin: 0px; 
clear:both; 
} 
.chartOptionsFlowTrend li *{ 
float:left; 
} 
a:-webkit-any-link { 
color: -webkit-link; 
text-decoration: underline; 
cursor: auto; 
} 
.chartQuota p a { 
float: left; 
height: 21px; 
outline: 0 none; 
border: 1px solid #ccc; 
line-height: 22px; 
padding: 0 5px; 
overflow: hidden; 
background: #eaeaea; 
color: #313131; 
text-decoration: none; 
} 

.chartQuota p { 
margin:0px; 
folat:left; 
overflow: hidden; 
height: 23px; 
line-height:24px; 
display: inline-block; 
} 
.chartOptionsFlowTrend p { 
height: 23px; 
line-height: 23px; 
overflow: hidden; 
position: relative; 
z-index: 2; 
background: #fefbf7; 
padding-top: 0px; 
display: inline-block; 
} 
.chartOptionsFlowTrend p a { 
border: 1px solid #fff; 
margin-left: 15px; 
color: #2e91da; 
} 
&lt;/style&gt;

Salin selepas log masuk

html:

&lt;div class="select_checkBox"&gt; 
&lt;div class="chartQuota"&gt; 
&lt;p&gt; 
&lt;a href="javascript:;" hidefocus="true" title="请选择指标"&gt;&lt;span&gt;选择指标&lt;/span&gt; 
&lt;b&gt;&lt;/b&gt; 
&lt;/a&gt; 
&lt;/p&gt; 

&lt;/div&gt;&lt;br&gt; 
&lt;div class="chartOptionsFlowTrend""&gt; 
&lt;ul&gt; 
&lt;li class=""&gt;&lt;input type="checkbox" value="1"&gt;&lt;span&gt;浏览次数（PV）&lt;/span&gt; 
&lt;/li&gt; 
&lt;li class=""&gt;&lt;input type="checkbox" value="1"&gt;&lt;span&gt;独立访客（UV）&lt;/span&gt; 
&lt;/li&gt; 
&lt;li class=""&gt;&lt;input type="checkbox" value="1"&gt;&lt;span&gt;IP&lt;/span&gt; 
&lt;/li&gt; 
&lt;li class=""&gt;&lt;input type="checkbox" value="1"&gt;&lt;span&gt;新独立访客&lt;/span&gt; 
&lt;/li&gt; 
&lt;li class=""&gt;&lt;input type="checkbox" value="1"&gt;&lt;span&gt;访问次数&lt;/span&gt; 
&lt;/li&gt; 
&lt;/ul&gt; 
&lt;p&gt; 
&lt;a href="javascript:;" title="确定" hidefocus="true" class="a_0"&gt;确定&lt;/a&gt;&lt;a 
href="javascript:;" title="取消" hidefocus="true" class="a_1"&gt;取消&lt;/a&gt; 
&lt;/p&gt; 
&lt;/div&gt; 
&lt;/div&gt;

Salin selepas log masuk

js:

&lt;script type="text/javascript"&gt; 
$(function(){ 
$(".select_checkBox").hover(function(){ 
$(".chartOptionsFlowTrend").css("display","inline-block"); 
},function(){ 
$(".chartOptionsFlowTrend").css("display","none"); 
}); 
}); 
&lt;/script&gt;

Salin selepas log masuk

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn