css弹出窗口怎么做，就是鼠标移上去，就弹出一个可以选择的小窗口。

html-css021

css弹出窗口怎么做，就是鼠标移上去，就弹出一个可以选择的小窗口。,第1张

css 很难实现这个应为css都是设定好后不能被改变的 ，只能通过js重新赋值 ，这种方式就是js里面的多层 jquery ui 里面也有这个插件 自己写个也可以 就是当鼠标移动到指定标签上 触发js效果

把原先的div display:none 该变让他显示或者直接写入个div 位置就是当前鼠标的位置 也可以 这个比较好用 。

实现鼠标悬停在图片上底部弹出文字内容的实现方法：

HTML代码:

<div id="wrapper">

<img src="http://placehold.it/300x200" class="hover" />

<p class="text">text</p>

</div>

CSS代码：

#wrapper .text {

position:relative

bottom:30px

left:0px

visibility:hidden

}

#wrapper:hover .text {

visibility:visible

}

主要思路是利用hover来进行功能实现，transition-duration:来实现过度动画；

css这样实现

html如下

.download-block{

width:90%

height:100px

background:#0b0e32

/*margin:  100px  auto 0*/

    margin:0 auto

position:absolute

left:0

right:0

transition-duration:2s

opacity:0.7

}

.download-block1{

background:transparent

height:100px

overflow:hidden

position:relative

left:0

top:-100px

right:0

padding-top:100px

transition-duration:2s

opacity:0.7

cursor:pointer

}

.download-block1:hover{

padding-top:0

transition-duration:2s

opacity:0.7

}