鼠标放上去，div高度随文字增加，并显示剩余的文字。

/*这里是鼠标放上去显示全名   */
   .kb2wText{display:block; height:20px; width:150px; line-height:20px; color:#000000; overflow:hidden;}
   .kb2wText:hover { width:100%; overflow:visible;height:auto; z-index:99;background-color:#F9F9F9;word-break:break-all;}

<div class="kb2wText">哈哈哈哈哈哈哈哈哈呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵</div>

时间： 2024-12-12 00:29:21

鼠标放上去，div高度随文字增加，并显示剩余的文字。的相关文章

JQ特效开发系列——鼠标移入时div高度和颜色发生变化 animate

需要展示的jQuery效果: 同一级别下有5个div,当鼠标移上任意一个div的时候,该div背景颜色和高度都发生变化,移出时背景颜色和高度都恢复为原来设置的样式,高度的变化过程是渐变,背景颜色的变化在高度变化之后进行. 基本结构样式代码: <style> * { margin: 0; padding: 0; } html,body { height: 100%; } .main div{ width: 800px; height: 80px; margin-bottom: 10px; bac

jQuery实现鼠标拖动改变Div高度

最近项目中需要在DashBoard页面做一个事件通知栏,该通知栏固定位于页面底部,鼠标拖动该DIV实现自动改变高度扩展内容显示区域. 以下是一个设计原型,基于jQuery实现,只实现了拖动效果,没有做页面美化,可以根据需求做相应修改. 直接上代码 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quo

鼠标放上去Div旋转特效代码

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3旋转</title> <style> .rotate { width: 100px; height: 100px; background: #92B901; -webkit-transition: -webkit-transform 2s; } .rotate:hover {

实现在矩形框中输入文字，可以显示剩余字数的功能

如下图: 要实现上面的功能,需要做到三点: 1.实现矩形框布局思路就是矩形框作为整个布局的一个background,在drawable中创建一个shap.xml样式文件 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="r

(转)RadioButton左侧显示文字，右侧显示按钮时文字不靠边的问题解决

作者: 发布日期:2014-02-13 21:00:45 我来说两句(0) 0 Tag标签:RadioButton 左侧显示项目中有一个这样的需求: 下面三行点击某行即选中,颜色变深.自然的想到使用RadioButton因此决定使用RadioButton和RadioButton实现. 1.RadioButton实现上述效果 view sourceprint? 01.<RadioButton 02.android:id="@+id/rbAll" 03.android:la

DIV CSS鼠标经过悬停在图片上时图片上方显示文字（转）

DIV CSS鼠标悬停在没有文字内容图片上时图片上方显示文字,完全是纯css div实现.CSS实现鼠标悬停放图片上方时显示美化内容. 原始图片显示没有文字在上方,当鼠标经过悬停时显示文字并且文字背景为半透明.可以使用纯DIV+CSS实现鼠标悬停图片上显示文字内容. 纯div+css实现第一张图片没有文字内容,鼠标悬停时出现第二张图那样效果使用div css实现鼠标悬停图片上方时显示文字内容原理: 首先我们设置一个盒子对象,并且将图片使用style标签内设置为CSS背景图片,同时设置该对象ht

限制div高度当内容多了溢出时显示滚动条

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type"content="text/html; charset=utf-8" /> 5 <title>限制div高度,内容多了显示滚动条</title> 6 <style type="text/css"> 7 div{ border-r

css文字超出自动显示省略号

只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ overflow: hidden; } css文字超出自动显示省略号显示省略号 css文字超出自动显示省略号 css文字超出自动显示省略号显示省略号 02.针对table table{ table-layout:fixed; } table td{ word-break:keep-all;/* 不换行

不用js实现鼠标放上去改变文字内容

css样式 .remind span {display:block;margin-top:-22px;} .remind a:hover {padding-top:22px;}.remind a {float:left;overflow:hidden;}.remind{height:22px;line-height:22px;overflow:hidden;padding-left:10px;} html代码 <div class="remind"><a href=&