کار با cssمنو و تگ ها

سوال

سلام وقتتون بخیر

مشکل من اینه که منوی html رو روی تگa -hover کردم میخوام hover روی li باشه چه طوری میتونم؟؟؟؟؟

حل شد 0
2016-12-24T07:18:30+03:30 1 پاسخ ها کاربر تازه 0

پاسخ ( 1 )

  1. SOLTANE GHALBHA
    0
    2016-12-24T14:02:43+03:30
    پاسخ

    سلام

    برای تمامی عناصر درون صفحه(تگ ها، کلاس ها و آیدی ها) می تونید خاصیت hover بدید، همونطوری که برای تگ a به این شکل hover دادید:

    a:hover

    برای بقیه عناصر صفحه هم میتونید، hover تعریف کنید، فقط کافیه بعد از نام عنصر در قسمت کدهای سی اس اس، hover: را به کار ببرید.

    به مثال زیر توجه کنید:

    <html>
<head>
	<title> خاصیت hover </title>
	<meta charset="UTF8"/>
	
<style type="text/css">
#box{
	background-color: #65aac0;
	width: 50%;
	height: 200px;
	border-radius: 6px;
	margin: 0px auto;
}

a {
    text-decoration: none;
    text-align: right;
    margin: 30%;
}

a:hover{
	color: white;
	font-size: 20px;
}

li {
    list-style: none;
    float: right;
    margin: 20px;
    direction: rtl;
}

li:hover{
	color: white;
	font-size: 20px;
}
</style>

</head>

<body>

<div id="box">
	<a href="https://beporsam.ir"> بپرسم، مکانی برای آموزش و رفع مشکلات </a>
	<ul>
		<li> آموزش Css </li>
		<li> آموزش html </li>
		<li> آموزش php </li>
	</ul>
</div>
	
</body>
</html>

    کدهای بالا را در یک فایل html ذخیره کنید، تا نتیجه را ببینید(در کدهای بالا یک div با آیدی با box ایجاد کردیم و به تگ a و تگ li به صورت جداگانه hover دادیم).

    به این مثال هم توجه کنید:

    <html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}

li {
    float: right;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">خانه</a></li>
  <li><a href="#blog">وبلاگ</a></li>
  <li><a href="#contact">تماس با ما</a></li>
  <li><a href="#about">درباره ما</a></li>
</ul>

</body>
</html>

    در مثال بالا، یک منو با تگ های ul و li ایجاد کردیم، که به تگ a که درون تگ li وجود داره، خاصیت hover دادیم.
    در مثال بالا اگه نیمخواید، به تگ a که داخل li وجود داره، خاصیت hover بدید و میخواید مستقیما hover روی li تعریف بشه، تگ a رو حذف کنید و متن رو مستقیم داخل تگ li بنویسید.
    موفق باشید.

    بهترین پاسخ

ارسال یک پاسخ