حرفه ای: چگونگی اعمال تغییرات روی css بخش :hover [بایگانی]

دانیال دزفولی

یک شنبه 27 مرداد 1392, 13:53 عصر

سلام
من این سایت سمت راست رو دارم مثل سایت سمت چپ درست می کنم ،

اما اگر دقت کنید با رفتن موس روی div (سایت سمت چپ) ارتفاع از بالا و پائین افزوده میشه

اما در سایت من(سمت راست) با رفتن روی div فقط ارفاع به پائین اضافه میشه نمی دونم مشکل چیه

http://up.persianscript.ir/uploads/13768199449661.jpg
اینم سورس هاش

.items li{
float: right;
list-style: none;
cursor: pointer;
margin-right: 5px;
height: 40px;
width: 100px;
line-height: 40px;
text-align: center;
transition: .4s all;
border-radius: 3px;
color:#fff;
font-SIZE: 23PX;
background:rgba(0,0,0,1);
}
.items li:hover{
height:50px;
line-height: 50px;

}

.items{
line-height:120px;
height:120px;
margin-right:400px;
margin-top:200px;

}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>new website</title>
<link rel="stylesheet" href="css/style.css">
<link href="http://adres-shoma/blogskin.ico" rel="shortcut icon">
</head>
<body>
<div class="main" id="main">
<header>
<div class="top-menu">
<ul>
<li>وبلاگ</li>
<li>درباره ی من</li>
<li>پشتیبانی</li>
</ul>
</div>

<div class="about-us"> </div>


</header>
<DIV class="danial">دانیال </DIV>

<div class="items">
<li id="it1" class="it">ha</li>
<li id="it2" class="it">ho</li>
<li id="it3" class="it">he</li>
<li id="it4" class="it">hy</li>
</div>
</div>
</body>
</html>

alirezaoshz

یک شنبه 27 مرداد 1392, 14:56 عصر

فک کنم باید با margin ببریدش بالا

2undercover

یک شنبه 27 مرداد 1392, 14:56 عصر

فک می کنم سایت سمت چپ به جای اینکه مقدار height رو زیاد کنه از استایل scale() استفاده کرده!

azamicu

یک شنبه 27 مرداد 1392, 17:17 عصر

دوست عزیز از padding استفاده کنی حله

دانیال دزفولی

یک شنبه 27 مرداد 1392, 21:01 عصر

!!!!!!!!!!!!!!!!!!!!!!!!!

دانیال دزفولی

یک شنبه 27 مرداد 1392, 21:07 عصر

اگه بگید در کجا باید از padding استفاده کنم خیلی ازتون ممون می شم

2undercover

یک شنبه 27 مرداد 1392, 21:27 عصر

به این صورت:

.items li:hover {
padding: 5px 10px;
}

دانیال دزفولی

یک شنبه 27 مرداد 1392, 22:22 عصر

به این صورت:

.items li:hover {
padding: 5px 10px;
}

کار نمی کنه

نه اونجور که گفتی نه اینطور

@charset "utf-8";
/* CSS Document */

* {
margin: 0;
padding: 0;
cursor: default;
direction: rtl;
}
.main {
width: 100%;
height: 100;
}
body {
background: url(../img/header/page2.jpg) repeat;
}
header {
width: 100%;
height: auto;
min-width: 500px;
background: #222222;
}
.danial {
font-size: 42px;
color: #333;
margin-right: 250PX;
height:64px;
line-height:64px;
margin-top:64px;
text-indent:70px;
background:url(../img/sa.png) no-repeat right;
background-size:contain
}

div.top-menu ul li a {
text-decoration: none;
color: #fff;
cursor: pointer;
font-weight: 600;
}
.top-menu li:hover {
color: #000;
background: rgba(204,153,0,1)
}
.top-menu ul li {
float: right;
list-style: none;
cursor: pointer;
margin-top: 10px;
margin-right: 5px;
height: 32px;
width: 100px;
line-height: 32px;
text-align: center;
transition: .4s all;
border-radius: 3px;
font-SIZE: 23PX;
}

.top-menu ul li:active {
margin-top: 15px;
}
.top-menu {
background: #171717;
height: 60px;
width: 100%;
color: #fff;
}
.top-menu ul {
margin-right: 80px;
}

.items li{
float: right;
list-style: none;
cursor: pointer;
margin-right: 5px;
height: 40px;
width: 100px;
line-height: 40px;
text-align: center;
transition: .4s all;
border-radius: 3px;
color:#fff;
font-SIZE: 23PX;
background:rgba(0,0,0,1); padding: 5px 10px;z-index:5
}
.items li:hover{
height:50px;
line-height: 50px;

}

.items{
line-height:120px;
height:120px;
margin-right:400px;
margin-top:200px;

}

meysam1366

یک شنبه 27 مرداد 1392, 22:45 عصر

کار نمی کنه

نه اونجور که گفتی نه اینطور

@charset "utf-8";
/* CSS Document */

* {
margin: 0;
padding: 0;
cursor: default;
direction: rtl;
}
.main {
width: 100%;
height: 100;
}
body {
background: url(../img/header/page2.jpg) repeat;
}
header {
width: 100%;
height: auto;
min-width: 500px;
background: #222222;
}
.danial {
font-size: 42px;
color: #333;
margin-right: 250PX;
height:64px;
line-height:64px;
margin-top:64px;
text-indent:70px;
background:url(../img/sa.png) no-repeat right;
background-size:contain
}

div.top-menu ul li a {
text-decoration: none;
color: #fff;
cursor: pointer;
font-weight: 600;
}
.top-menu li:hover {
color: #000;
background: rgba(204,153,0,1)
}
.top-menu ul li {
float: right;
list-style: none;
cursor: pointer;
margin-top: 10px;
margin-right: 5px;
height: 32px;
width: 100px;
line-height: 32px;
text-align: center;
transition: .4s all;
border-radius: 3px;
font-SIZE: 23PX;
}

.top-menu ul li:active {
margin-top: 15px;
}
.top-menu {
background: #171717;
height: 60px;
width: 100%;
color: #fff;
}
.top-menu ul {
margin-right: 80px;
}

.items li{
float: right;
list-style: none;
cursor: pointer;
margin-right: 5px;
height: 40px;
width: 100px;
line-height: 40px;
text-align: center;
transition: .4s all;
border-radius: 3px;
color:#fff;
font-SIZE: 23PX;
background:rgba(0,0,0,1); padding: 5px 10px;z-index:5
}
.items li:hover{
height:50px;
line-height: 50px;

}

.items{
line-height:120px;
height:120px;
margin-right:400px;
margin-top:200px;

}

دوست عزیز

توی این قسمت بذارید

.items li:hover{
height:50px;
line-height: 50px;

}

دانیال دزفولی

یک شنبه 27 مرداد 1392, 22:56 عصر

دوست عزیز

توی این قسمت بذارید

.items li:hover{
height:50px;
line-height: 50px;

}

همونطور که گفتم گذاشتم ولی همون طوری موند

qartalonline

یک شنبه 27 مرداد 1392, 23:59 عصر

کدتون رو بصورت زیر اصلاح کردم.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>new website</title>
<link rel="stylesheet" href="css/style.css">
<link href="http://adres-shoma/blogskin.ico" rel="shortcut icon">
<style type="text/css">
ul.items{
height:50px;
}
ul.items li{
background:rgba(0,0,0,1);
list-style:none;
cursor:pointer;
width:100px;
line-height:40px;
text-align:center;
border-radius:3px;
color:#fff;
font-size:23px;
display:inline-block;
margin:5px 0;
}
ul.items li:hover{
padding:5px 0;
margin:0;
}
</style>
</head>
<body>
<div class="main" id="main">

<ul class="items">
<li id="it1" class="it">ha</li>
<li id="it2" class="it">ho</li>
<li id="it3" class="it">he</li>
<li id="it4" class="it">hy</li>
</ul>

</div>
</body>
</html>

دانیال دزفولی

دوشنبه 28 مرداد 1392, 11:56 صبح

کدتون رو بصورت زیر اصلاح کردم.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>new website</title>
<link rel="stylesheet" href="css/style.css">
<link href="http://adres-shoma/blogskin.ico" rel="shortcut icon">
<style type="text/css">
ul.items{
height:50px;
}
ul.items li{
background:rgba(0,0,0,1);
list-style:none;
cursor:pointer;
width:100px;
line-height:40px;
text-align:center;
border-radius:3px;
color:#fff;
font-size:23px;
display:inline-block;
margin:5px 0;
}
ul.items li:hover{
padding:5px 0;
margin:0;
}
</style>
</head>
<body>
<div class="main" id="main">

<ul class="items">
<li id="it1" class="it">ha</li>
<li id="it2" class="it">ho</li>
<li id="it3" class="it">he</li>
<li id="it4" class="it">hy</li>
</ul>

</div>
</body>
</html>

:گریه: نمیشه

qartalonline

دوشنبه 28 مرداد 1392, 12:02 عصر

چرا نمیشه؟ من خودم تست کردم. هیچ مشکلی نداره.

دانیال دزفولی

دوشنبه 28 مرداد 1392, 12:11 عصر

هیچ تغییری نمیکنه بذارید همونطور که میگید سورس هاش رو کلا بنویسیم اینجا

دانیال دزفولی

دوشنبه 28 مرداد 1392, 12:13 عصر

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>new website</title>
<link rel="stylesheet" href="css/style.css">
<link href="http://adres-shoma/blogskin.ico" rel="shortcut icon">
</head>
<body>
<div class="main" id="main">
<header>
<div class="top-menu">
<ul>
<li style="background:#fff;color:#000;cursor:default">خانه</li>
<li>وبلاگ</li>
<li>درباره ی من</li>
<li>پشتیبانی</li>
</ul>
</div>

<div class="about-us"> </div>


</header>
<DIV class="danial">دانیال </DIV>

<div class="items">
<li id="it1" style="left:20px" class="it">ha</li>
<li id="it2"style="left:140px" class="it">ho</li>
<li id="it3" style="left:280px" class="it">he</li>
<li id="it4"style="left:400px" class="it">hy</li>
</div>
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */

* {
margin: 0;
padding: 0;
cursor: default;
direction: rtl;
}
.main {
width: 100%;
height: 100;
}
body {
background: url(../img/header/page2.jpg) repeat;
}
header {
width: 100%;
height: auto;
min-width: 500px;
background: #222222;
}
.danial {
font-size: 42px;
color: #333;
width:100px;
margin-right: 250PX;
height: 64px;
line-height: 64px;
margin-top: 64px;
text-indent: 70px;
background: url(../img/sa.png) no-repeat right;
background-size: contain;
transition: all 0.8s ease-in-out;

}
.danial:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(-30deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);}

.danial:active{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);}

div.top-menu ul li a {
text-decoration: none;
color: #fff;
cursor: pointer;
font-weight: 600;
}
.top-menu li:hover {
color: #000;
background: rgba(204,153,0,1)
}
.top-menu ul li {
float: right;
list-style: none;
cursor: pointer;
margin-top: 10px;
margin-right: 5px;
height: 32px;
width: 100px;
line-height: 32px;
text-align: center;
transition: .4s all;
border-radius: 3px;
font-SIZE: 23PX;
}
.top-menu ul li:active {
margin-top: 15px;
}
.top-menu {
background: #171717;
height: 60px;
width: 100%;
color: #fff;
}
.top-menu ul {
margin-right: 80px;
}
.items li {
position: absolute;
float: right;
list-style: none;
cursor: pointer;
margin-right: 5px;
height: 40px;
width: 100px;
line-height: 40px;
text-align: center;
transition: .4s all;
border-radius: 3px;
color: #fff;
font-SIZE: 23PX;
background: rgba(0,0,0,1);
}
.items li:hover {
padding:5px 0;
margin:0;
}
.items {
line-height: 120px;
height: 120px;
margin-right: 400px;
margin-top: 200px;
}

2undercover

دوشنبه 28 مرداد 1392, 13:19 عصر

از این کد استفاده بکنید:

.items li:hover {
transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
-moz-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
}

دانیال دزفولی

دوشنبه 28 مرداد 1392, 13:30 عصر

از این کد استفاده بکنید:

.items li:hover {
transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
-moz-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
}

درست شد خیلی خیلی ممنون دستتون درد نکنه

دانیال دزفولی

دوشنبه 28 مرداد 1392, 14:31 عصر

دوستان ببخشید دیگه دارم رودار میشم

فقط بگید چرا متن هم همراهش کش میاد.

توی سایت
http://www.pasargad-graphic.com
همچین مشکلی نیست

کدی هم نوشتم که متن داخل li scale ش ثابت بمونه

از صاحب سایت هم تقاضا کردم بیاد اینجا کاشکی خودش جواب بده

2undercover

دوشنبه 28 مرداد 1392, 15:53 عصر

اگر نمی خواید که متن داخل آیتم ها بزرگ بشن از همون padding استفاده بکنید فقط به مقداری که padding دادید از margin-top کم کنید یعنی اینجوری:

.items li:hover {
padding: 5px 0;
margin-top: -5px;
}

refugee

دوشنبه 28 مرداد 1392, 18:36 عصر

صبح خوندم کلی هم نوشتم جواب شما رو اینترنت متاسفانه قطع شد .

جواب این دوست بالایی درست است . باید از مارجین منفی استفاده کنید .

margin:-5px;

دلیل : زیرا مارجین ها وظیفه استایل دهی خارجی رو دارن و از بیرون فاصله میگیرند . اما پدینگ همیشه فاصله داخلی رو لحاظ میکند . شما هم نیاز به فاصله بیرون دارید . و چون نیاز دارین وقتی موس اور میشه بره بالا تر تا تراز بشه باید از منفی برای سمت top مارجین استفاده کنید .

margin-top: -5px;

موفق باشید

دانیال دزفولی

دوشنبه 28 مرداد 1392, 18:43 عصر

از همه ی دوستان ممونم دست همه درد نکنه
به افتخار وبسایت برنامه نویس همه با هم بزن دستو

دس دس دس دس دس دس دس دس دس