Rumah >hujung hadapan web >html tutorial >html?样式_html/css_WEB-ITnose
html?样式_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 11:33:591317semak imbas
<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> Kenyataan：
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
Artikel sebelumnya：自制Chrome拓展_html/css_WEB-ITnoseArtikel seterusnya：form 表单默认的提示_html/css_WEB-ITnose