ورود

View Full Version : سوال: سوال در مورد hover


MoMo121
پنج شنبه 27 تیر 1392, 19:29 عصر
چطور می توان کد زیر را یه طوری بنویسم که مرورگر بفهمد




<html>
<head>
<style>


a:hover{#div1{color:red}}


</style>
</head>
<body>
<div id="div1">
<a href="#">
salam
</a>
</div>
</body>
as13851365
پنج شنبه 27 تیر 1392, 19:43 عصر
a:hover #div1{color:red}
MoMo121
پنج شنبه 27 تیر 1392, 19:54 عصر
نه متاسفانه کار نکرد
qartalonline
پنج شنبه 27 تیر 1392, 20:13 عصر
هدفتون چیه؟
pirmard66
پنج شنبه 27 تیر 1392, 20:17 عصر
خدمت شما :



<html>
<head>
<style>


#div1 a:hover{color:red}


</style>
</head>
<body>
<div id="div1">
<a href="#">
salam
</a>
</div>
</body>
IamOverlord
پنج شنبه 27 تیر 1392, 20:37 عصر
چطور می توان کد زیر را چطور بنویسم که مرورگر بفهمد




<html>
<head>
<style>


a:hover{#div1{color:red}}


</style>
</head>
<body>
<div id="div1">
<a href="#">
salam
</a>
</div>
</body>


فکر کنم بهتره از jQuery استفاده کنید...


<!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=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js" charset="utf-8"></script>
<style>
.mydiv a{
text-decoration: none;
}
</style>
<script>
$(function(){
$('.mydiv a').hover(
function(){
$(this).parent().css({'background-color':'#def'});
},function(){
$(this).parent().css({'background-color':''});
}
);
});
</script>
</head>

<body>
<div class="mydiv">
<a href="http://barnamenevis.org">Barnamenevis</a>
</div>
<div class="mydiv">
<a href="http://google.com">Google</a>
</div>
<div class="mydiv">
<a href="http://yahoo.com">Yahoo</a>
</div>
</body>
</html>
MoMo121
جمعه 28 تیر 1392, 11:58 صبح
متاسفانه هیچ یک از کد های بالا کمکی نکرد پس من یه توضیح کوتله می دم

من می خوام وقتی موس روی لینک
<a href="#">salam</a>می رود

#div1 دارای شیوه ی زیر شود

color:red


هدف اینه که اگه موس روی لینک سلام رفت تمام متن های زیر مجموعه ی div1 قرمز رنگ بشوند
f_talebi
جمعه 28 تیر 1392, 15:36 عصر
متاسفانه هیچ یک از کد های بالا کمکی نکرد پس من یه توضیح کوتله می دم

من می خوام وقتی موس روی لینک
<a href="#">salam</a>می رود

#div1 دارای شیوه ی زیر شود

color:red


هدف اینه که اگه موس روی لینک سلام رفت تمام متن های زیر مجموعه ی div1 قرمز رنگ بشوند

سلام. این رو امتحان کنید : (در صورتی که روی لینک میرید div color قرمز میشه)




<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>

$(document).ready(function(){


$("a").hover(function() {
$("#div1").css('color','red');
});

});

</script>
</head>
<body>
<a href="#">salam</a>
<div id="div1"> Mohtaviate div1</div>

</body>
</html>




و اگه میخواید وقتی ماوس از لینک برداشته میشه رنگ محتویات دایو به حالت اول بازگردد از این استفاده کنید: (فرض براین است که رنگ اولیه سیاه بوده)




<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>

$(document).ready(function(){
$("a").hover(function(){

$("#div1").css('color','red');
},
function(){
$("#div1").css('color','black');

});
});



</script>
</head>
<body>
<div id="div1">
<a href="#">salam</a>
Mohtaviate div1
</div>

</body>
</html>



موفق باشید.
f_talebi
شنبه 29 تیر 1392, 15:51 عصر
البته این چون سوال خودم بود بیشتر پیگیر شدم. منتهی من میخواستم با افکت animation رنگ دایوم رو تغییر بدم . چون با این افکت میشه به فرآیند تغییر رنگ، interval داد قشنگتر هستش. ولی در حالت عادی نمیشه این کارو انجام داد.
اما با پلاگین color animation میشه که از اینجا میتونین دانلودش کنین : http://www.bitstorm.org/jquery/color-animation/
و ازش استفاده کنید.(هر interval که بدید همون قدر طول میشه تا رنگ عوض شه.منslow دادم)



<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="jquery.animate-colors.js"></script>
<script>

$(document).ready(function(){
$("a").hover(function(){

$("#div1").animate({color: 'rgb(250,10,10)'},'slow');
},
function(){
$("#div1").animate({color: 'rgb(3, 3, 3)'},'slow');
});
});



</script>
</head>
<body>
<div id="div1">
<a href="#">salam</a>

<p>Mohtaviate div1</p>
<p>Mohtaviate div1</p>

</div>

</body>
</html>