jQuery 滑鼠移過出現懸浮式文字提示

jQuery 滑鼠移過出現懸浮式文字提示

jQuery 垂直滾動跑馬燈文字公告
hover.js 是一個簡單好用的自定義 jQuery 工具提示插件,將滑鼠懸停在物件上時會顯示文字提示。
按這裡下載我們提供的 demo.html 自行編輯修改內容及 js / css 路徑。
3.2 KiB / RAR
jQueryjQuery hover.js 放入 HTML 文件中
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="jquery.hover.js"></script>
data-hover屬性裡自訂提示內容
很高興見到你。這裡是<span data-hover="Is Life">易思生活</span>
修改 sample.css。可任意重寫或修改 CSS 代碼來創建自訂樣式
.hover-text {
	display: inline-block;
	position: absolute;
	background: #222;
	border-radius: .4em;
	padding: 12px;
	font-size: .85em;
	color: #fff;
}
.hover-text:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-top-color: #222;
	border-bottom: 0;
	border-left: 0;
	margin-left: -10px;
	margin-bottom: -20px;
}
06-07-2020
若圖片無法顯示或檔案無法下載,請至文章底下留言區通知,將會盡速更正。
易思生活採用 授權。圖文請勿複製轉貼,歡迎使用「分享」功能並註明出處。

你可能會喜歡的

跟隨滑鼠移動讓圖片改變角度

跟隨滑鼠移動讓圖片改變角度

使用 jQuery 拆分垂直商品展示

使用 jQuery 拆分垂直商品展示

簡約的 jQuery 音頻播放插件

簡約的 jQuery 音頻播放插件

jQuery 趣味十足的 iPhone 桌布預覽

jQuery 趣味十足的 iPhone 桌布預覽

No Comment

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。