css中如果没有设置display,则无法显示动画效果!!!

 1  <script type="text/javascript" src="jquery-1.7.1.js"></script>
 2     <script type="text/javascript">
 3
 4         $(document).ready(function(){
 5
 6             var x = 10;
 7             var y = 10;
 8
 9             $(‘.prompt_a‘).mouseover(function(e){
10
11                 var prompt_div = "<div class=‘prompt_div_cls‘>"+this.title+"</div>";
12
13                 $(‘body‘).append(prompt_div);
14
15                 $(‘.prompt_div_cls‘).css({"left":(e.pageX+x)+"px","top":(e.pageY+y)+"px"})
16                         .show("fast");
17
18             }).mouseout(function(){
19
20                 $(‘.prompt_div_cls‘).remove();
21
22             }).mousemove(function(e){
23                         $(‘.prompt_div_cls‘).css({"left":(e.pageX+x)+"px","top":(e.pageY+y)+"px"});
24
25             })
26         });
27
28     </script>
29     <style type="text/css">
30
31         .prompt_div_cls {width: 300px;height: 200px;border: 1px solid #ccc;background-color: #eee;position: absolute;display: none;}
32
33     </style>
34 </head>
35 <body>
36     <a class="prompt_a" href="#" title="提示信息提示信息提示信息提示信息提示信息提示信息提示信息
37     提示信息提示信息提示信息提示信息提示信息提示信息提示信息
38     提示信息提示信息提示信息提示信息提示信息提示信息提示信息
39     提示信息提示信息提示信息提示信息提示信息提示信息提示信息
40     提示信息提示信息提示信息提示信息提示信息提示信息提示信息
41     提示信息提示信息提示信息提示信息提示信息提示信息提示信息">弹出提示信息</a>
42 </body>
43 </html>

不信可以去掉display试试看!!!反正我信了!!!

时间: 2024-08-07 16:58:50

css中如果没有设置display,则无法显示动画效果!!!的相关文章

解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果

解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果 一.前言 最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在网上汇总了一些这样的代码. 二.3D效果代码 2.1.旋转相册 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>旋转相

CSS实现DIV感应鼠标Hover时的显示隐藏效果

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS实现DIV感应鼠标Hover时的显示隐藏效果</title> <style> .wrap{} .wrap .box{border:2px solid red;width:200px;height:200px;float:left;margi

Android中给layout下的布局文件添加动画效果

先上实现效果: 给ListView添加文本内容,文本内容添加进ListView的过程中增加动画效果 步骤一: 先定义好一个动画文件,把要实现的动画效果写好. 1.在res文件夹下创建anim文件夹 2.在anim文件夹中添加一个fd.xml(文件名自定义)文件 fd.xml内容: <!--组合动画 duration:组合动画发生的的间隔时间 --> <set android:duration="1000" xmlns:android="http://sche

css中的clear:both,display:flex;

介绍两者一起讨论的原因: 在明天就国庆的日子里陪着程序员的只有代码,啤酒,还有音乐,然后就是灯光下默默陪伴自己的影子.好了,不矫情了. ----------------------------------------------------------- 先上两张图,然后慢慢道来...... 第一张是实现的布局,第二张是布局的代码.简单的说明一下:图一中有4块为classname为newsItem的div容器(代码有点乱看起来有点吃力),这4个容器包含在classname为newsRow的sec

CSS中的间距设置与盒子模型

CSS间距 内补白 外补白 盒子模型 CSS间距 很多时候我们为了美观,需要对内容进行留白设置,这时候就需要设置间距了. 内补白 设置元素的内间距 padding: 检索或设置对象四边的内部边距 padding:10px; 上下及两边设置 padding:5px 10px; 由上边界开始,顺时针设置 padding:10px 20px 30px 40px 单边设置 padding-top: 检索或设置对象顶边的内部边距 padding-right: 检索或设置对象右边的内部边距 padding-

CSS中 opacity的设置影响了index(层数)的改变

在使用 opacity 属性来实现页面整体透明的时候,发现了一个问题.如果两个层发生了重叠,使用了 opacity 属性并且属性值小于1的层,会覆盖掉后面的层.于是动手做了个实验,来验证 opacity 的层次. 网页中的层叠规律是这样的:如果两个层都没有定义 position 属性为 absolute 或者 relative 属性,哪个层的HTML代码放在后面,哪个层就显示在上面.如果指定了 position 属性,并且设置了 z-index 属性,谁的值大,谁就在上面. Opacity 属性

15 css中边框的设置

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> p{ border:1px solid red; } li{ border-bottom:1px dotted red; } </style> </head> <

css 中visibility:hidden和display:none有什么区别呢

<div style="width:100px;height:100px;background:red;visibility:hidden"></div>//对象隐藏后,还有占有相应的空间大小 <div style="width:100px;height:100px;background:red;display:none"></div>//对象隐藏后,对象不占任何空间

trick:CSS 3+checkbox实现JQuery的6个基本动画效果

在JQuery中,有六个基本动画函数:show()/hide().fadeIn()/fadeOut().slideUp()/slideDown().这篇文章,就利用CSS3+checkbox实现这六个基本动画. show()/hide()的实现 show()/hide()的实现主要控制元素的display属性. html: <div id="box"> <input type="checkbox" id="sh"/> &l