ورود

View Full Version : سوال: hover کردن رو یک شی و نوشتن خاصیت برای دو شی؟؟؟



130000
شنبه 19 بهمن 1392, 09:45 صبح
به نام خداوند بخشنده بی منت

سلام


دوستان عزیز چطور میشه با hover کردن روی یک شی به دو شی یا چند شی خاصیت داد خاصیت هم زمان...

مثلا وقتی روی یک شی قرار میگیرم هم رنگ اون شی ای که اشاره گر موس روش قرار گرفته تغییر کنه و هم رنگ شی مورد نظر دیگه ای...

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

p30online
شنبه 19 بهمن 1392, 10:02 صبح
شما با استفاده از jquery می توانید استفاده کنید!



$(".class or #id").hover(function(e) {
$(".class or #id").css("color","#FFFFFF");
});

130000
شنبه 19 بهمن 1392, 10:22 صبح
دوست عزیز با سی اس اس نمیشه؟؟؟ همچین کاری کرد؟؟؟

Omid Jackson
شنبه 19 بهمن 1392, 11:03 صبح
من در این حد میدونم میشه:
http://jsfiddle.net/OmidJackson/d7EU5/
دیگه فکر نکنم به جز این راه دیگه ای داشته باشه

130000
شنبه 19 بهمن 1392, 12:30 عصر
من 2 تا دیو یا دایو دارم مثل این 2 نقطه : یکی بالا و یکی زیر قرار داره میخوام وقتی اشاره گر موس روی دیو بالایی قرار میگیره ، بکگراند هر دو دیو با رنگ متفاوت تغییر کنه.
لطفا یکی راهنمایی کنه میخوام با سی اس اس انجام بدم

DariushGreat
شنبه 19 بهمن 1392, 12:55 عصر
در css یک کلاس و چند ID تعریف کن
مثلا دو div داری که ID هاشون به ترتیب #d1 و #d2 هست. همزمان به هردو شون کلاس مشترک رو بده (مثلا .dd)
بعد در hover قید کن که رنگ div هایی که کلاس .dd دارند تغییر کنن.

130000
شنبه 19 بهمن 1392, 13:44 عصر
اگه به روش شما انجام بدم فقط میتونم یک رنگ رو به چند id یا class بدم اما من میخوام یکی رو مثلا سفید کنم و یکی هم بهش بک گراند بدم از نوع لاینیر

DR_borna
شنبه 19 بهمن 1392, 19:19 عصر
درود،

<div class="first">first</div>
<div class="second">second</div>


.first:hover .second{
background-color:red;
}

اگر من منظورتون رو درست فهمیده باشم هیچ نیازی به JQ نیست در کد css بالا ما میگیم که وقتی دیو اولی هاور شد دیو دومی رنگش قرمز بشه .
موفق باشید

130000
شنبه 19 بهمن 1392, 20:00 عصر
من میخوام وقتی رو first قرار میگیره فیرستم رنگش بشه آبی و در همون آن second هم بشه سیاه متوجه شدی

Omid Jackson
شنبه 19 بهمن 1392, 23:56 عصر
من سرچ کردم فهمیدم که میشه تقریبا این کار رو انجام داد
http://jsfiddle.net/OmidJackson/LfXJ3/

tekide
یک شنبه 20 بهمن 1392, 02:58 صبح
سلام اگه اینجور منظورتونو فهمیدم شما میخواد دو تا دسته با رفتن رویه یه دسته فعال شه
..css

<html> <head> <title>test</title> <style> a:link{color:black;font-size:20px;} a:hover{color:blue;} .sidebar_right:hover~.sidebar_right1{color:red;} </style> </head> <body> <div class="sidebar_right"><div class="menu"><ul><li><a href="#">aaaaa</a></li></ul></div></div> <div class="sidebar_right1"><div class="menu"><h3><span>bbbbbb</span></h3></div></div> </body>

کدهای سایت بار همه مثال بودن..
با جیکوعری

<html> <head> <meta charset="utf-8"> <title>Downloading the plugins failed</title> </head> <body bgcolor="#2b4e67"> <link type="text/css" href="jqueryui18.css" rel="stylesheet" /> <script type="text/javascript" src="jqueryui18.js"></script> <div id="main"></div> <script> var htmlScreen = '<div class="ui-widget ui-form"> <div class="ui-widget-header ui-corner-all"> <img src="NessusLogoScreen.png"/> </div> <div class="ui-widget-content ui-corner-all">\ <h2>Sorry...</h2><h4>It was not possible to download the plugins on this host.<br/>\ An unexpected error occurred while downloading the plugins. It could be a transient network error, a lack of disk space, or something else entirely.<br/>\ <br/><br/></h4>\ <h2>What to do now?</h2>\ <h4>\ On the server, try to run the command <pre>C:\\Program Files\\Tenable\\Nessus\\nessus-update-plugins.exe</pre>. If this does not work, log into your customer portal at <a href="https://support.tenable.com/">https://support.tenable.com/</a> and \ open a ticket to request assistance.\ </h4> </div>\ </div>'; function redirect() { window.location = "/"; } function updateProgress() { var progress; progress = $("#progress").progressbar("option","value"); if (progress <= 100) { jQuery.ajax({ type:'GET', url:"/load-progress", async:true, dataType:"xml", error:function(xhr, ajaxOptions, thrownError) { setTimeout(updateProgress, 2000); }, success:function(xml) { var progress; var status; progress = parseInt($(xml).find('progress-percent').text()); { $("#progress").progressbar("option", "value", progress); setTimeout(updateProgress, 1000); } } }); } } function load_screen() { $("#main").html(htmlScreen); } $(document).ready(function(){ load_screen(); }); </script> </body> </html>
فقط باید کتابخانه فراخانی شه..
یا علی

علیرضا.ا
یک شنبه 20 بهمن 1392, 13:55 عصر
اینم یه نمونه دیگه:


<style>
.first{width:80px;height:50px;background:red;}
.secound{width:80px;height:50px;background:green}
.first:hover{background:blue}
.first:hover + .secound{background:#000}
</style>

<div class='first'></div>
<div class='secound'></div>

refugee
یک شنبه 20 بهمن 1392, 15:58 عصر
من سرچ کردم فهمیدم که میشه تقریبا این کار رو انجام داد
http://jsfiddle.net/OmidJackson/LfXJ3/

امید جان این ‍~ منظورش چیه ؟
.d1:hover ~ .d2 {

Omid Jackson
یک شنبه 20 بهمن 1392, 16:14 عصر
امید جان این ‍~ منظورش چیه ؟
.d1:hover ~ .d2 {
http://www.w3schools.com/cssref/sel_gen_sibling.asp
یعنی وقتی رفتیم رو کلاس d1 و بعدش هر کلاس d2 که بود (در همون سطح خودش)، اون تغییرات رو روش اعمال میکنه
ولی اگر + استفاده کنین مثل مثالی که دوستمون گفتن اون کلاسی که ذقیقا بعد از اون بیاد روش اعمال میشه
مثال برای ~
http://jsfiddle.net/OmidJackson/Srt93/
مثال برای +
http://jsfiddle.net/OmidJackson/hqm4x/

130000
یک شنبه 20 بهمن 1392, 17:47 عصر
من سرچ کردم فهمیدم که میشه تقریبا این کار رو انجام داد
http://jsfiddle.net/OmidJackson/LfXJ3/
ممنون شما منو به جوابم رسوندید

130000
یک شنبه 20 بهمن 1392, 17:49 عصر
اینم یه نمونه دیگه:


<style>
.first{width:80px;height:50px;background:red;}
.secound{width:80px;height:50px;background:green}
.first:hover{background:blue}
.first:hover + .secound{background:#000}
</style>

<div class='first'></div>
<div class='secound'></div>

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