Heim >Web-Frontend >HTML-Tutorial >html?样式_html/css_WEB-ITnose
html?样式_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:33:591334Durchsuche
<table><tr><td title=A>1</td><td title=B>2</td><td title=C>3</td></tr></table>
如何给弹出的框添加样式？
回复讨论(解决方案)
我不知道，这种能不能改样式。如果你希望能有样式的话，我建议你用js来重写吧，不要用系统自带的~
1 2 3可以用div来布局，弹出的A B C也用div布局，用js控制鼠标悬停事件，A B C显示或者是隐藏。
<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title> 页面名称 </title><style type="text/css">td:hover { position: relative;}td:hover:before { content: attr(data-title); position: absolute; left: 5px; top: 100%; background: #330099; color: #99FFFF; border: 1px solid #00FF00; border-radius: 5px; box-shadow: 3px 3px 3px #666666;}</style></head><body><table><tr><td data-title="aaaa">1111</td><td data-title="bbbb">2222</td><td data-title="cccc">3333</td></tr></table></body></html> 我是来给２楼点赞的，思路给力。
<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title> 页面名称 </title><style type="text/css">td:hover { position: relative;}td:hover:before { content: attr(data-title); position: absolute; left: 5px; top: 100%; background: #330099; color: #99FFFF; border: 1px solid #00FF00; border-radius: 5px; box-shadow: 3px 3px 3px #666666;}</style></head><body><table><tr><td data-title="aaaa">1111</td><td data-title="bbbb">2222</td><td data-title="cccc">3333</td></tr></table></body></html> Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：自制Chrome拓展_html/css_WEB-ITnoseNächster Artikel：form 表单默认的提示_html/css_WEB-ITnose