简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > HTML 튜토리얼 > 본문

hover用于a标签_html/css_WEB-ITnose

WBOY
풀어 주다： 2016-06-21 09:46:59
원래의
1221명이 탐색했습니다.

本帖最后由 u012721633 于 2013-11-04 18:10:32 编辑 

<head> <style>	ul li a:hover{	 background-color: red;	} </style></head><ul> <li><a>文字</a></li></ul>
로그인 후 복사


这样只有 文字 悬停时会变红 但是我要前面的小圆点也变红 有没有办法？
实际工作中背景是个图片 把背景图片向左移也行 就是要整个 li 都在背景中
但hover只对a有效 ，如果在li外面包一个,好像会背景图片有文字的地方是白的 而且整个li会向右移
不想用脚本 ，有没有办法？


回复讨论(解决方案)





无标题文档 







<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title></head><style>ul li{	background:url(你那小点的图片) no-repeat left center; padding-left:10px; height:24px; line-height:24px;}ul li a:hover{	background-color: red;}</style><body><ul>	<li><a>文字</a></li></ul></body></html>
로그인 후 복사
관련 라벨：
hover用于a标签
원천：php.cn
이전 기사：我想定义 input 类型 中的 checkbox 的css_html/css_WEB-ITnose 다음 기사：这两个CSS定义的效果怎么不一样呢？_html/css_WEB-ITnose
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
웹 스크래핑: href 속성 누락 - 웹 스크래핑을 위해 마우스 클릭을 시뮬레이션해야 합니까? 재미있는 웹 스크래핑 프로젝트를 위해 ttps://www.nhl.com/stats/teams에서 NHL 데이터를 수집하고 싶습니다. 클릭 가능한 Excel 내보내...
에서 2024-04-04 10:32:06
0
1
3473
태그로 게시물 검색 게시물을 태그별로 표시해야 합니다. 내 솔루션은 다음과 같은 단일 태그에 대해 작동합니다. Route::get('/posts',[PostController::cl...
에서 2024-04-03 22:38:54
0
1
430
div를 사용하지 않고 같은 줄에 여러 범위 클래스를 가질 수 있습니까? 각 텍스트마다 다른 색상을 갖기를 원했기 때문에 여러 범위 클래스를 사용하여 CSS에서 색상을 설정했습니다. 또한 텍스트에 줄 바꿈이 있기를 원했기 때문에 div...
에서 2024-04-03 11:17:18
0
1
360
정규식을 사용하여 HTML에서 단어 계산 이것은 이것과 같은 문제입니다. 하지만 저는 자바스크립트를 사용하지 않기 때문에 "innerText"는 제게는 해결책이 아니며 정규 표현식이 /...
에서 2024-04-01 22:44:06
0
1
416
래핑 대신 HTML <pre><code> 태그를 오버플로하려고 하면 Flex 간격이 깨집니다. GitHub나 다른 곳에서 볼 수 있는 스타일의 코드 블록을 만들기 위해 프리코드 선택기에 CSS를 적용했습니다. 저는 레이아웃에 Flexbox를 사용하고 있으며...
에서 2024-04-01 12:22:06
0
1
296
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！