سوال: روش ایجاد hover [بایگانی]

datalife2

سه شنبه 19 فروردین 1393, 11:41 صبح

سلام
دو تا دایره با css طراحی کردم
دایره اولی کوچکتر و سیاه رنگه
دایره دومی بزرگتر و سفید هست
حالا دایره اول رو گذاشتم داخل دایره دوم
میخوام وقتی رو دایره دوم میرم(دایره بزرگتر) هم دایره اول و هم دایره دوم دو تا افکت hover مجزا داشته باشن
ینی با رفتن رو دایره دوم میخوام رنگ سایه دایره دوم تغییر کنه و هم زمان رنگ پس زمینه دایره اول هم تغییر کنه
اما با اطلاعاتی که من دارم فقط میتونم افکت hover رو زمانی تنظیم کنم که موس رو میبریم روی دایره مورد نظر
اما من میخوام با رفتن رو دایره بزرگتر دایره کوچکتر هم رنگش تغییر کنه
در ضم فقط میخوام با کد css و html این کار رو بکنم
امیدوارم متوجه شده باشین

alireza_s_84

سه شنبه 19 فروردین 1393, 12:32 عصر

سلام
دو تا دایره با css طراحی کردم
دایره اولی کوچکتر و سیاه رنگه
دایره دومی بزرگتر و سفید هست
حالا دایره اول رو گذاشتم داخل دایره دوم
میخوام وقتی رو دایره دوم میرم(دایره بزرگتر) هم دایره اول و هم دایره دوم دو تا افکت hover مجزا داشته باشن
ینی با رفتن رو دایره دوم میخوام رنگ سایه دایره دوم تغییر کنه و هم زمان رنگ پس زمینه دایره اول هم تغییر کنه
اما با اطلاعاتی که من دارم فقط میتونم افکت hover رو زمانی تنظیم کنم که موس رو میبریم روی دایره مورد نظر
اما من میخوام با رفتن رو دایره بزرگتر دایره کوچکتر هم رنگش تغییر کنه
در ضم فقط میخوام با کد css و html این کار رو بکنم
امیدوارم متوجه شده باشین

ببینید با css نمیشه زمانیکه روی یک فرزند برید بتونید والدش رو تغییر بدین و تنها راه استفاده از جاوا اسکریپته ولی با رفتن روی والد میشه استایل فرزند رو تغییر داد به شکل زیر:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .outer { width: 400px; height: 200px; background-color: red; padding: 10px; }
.inner { width: 100%; height: 100%; background-color: blue; }
.outer:hover { background-color: black; }
.outer:hover .inner{ background-color: green; } </style></head><body> <div class="outer"> <div class="inner"></div> </div></body></html>

datalife2

سه شنبه 19 فروردین 1393, 13:43 عصر

ممنون
دقیقا همینو میخواستم