Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS]Hover, ale skomplikowany
Damonsson
post 15.01.2010, 16:46:09
Post #1





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

Ostrzeżenie: (0%)
-----


A o to cały problem.

Zależy mi żeby nie używać js.

Dość długo się z tym męczę, ale póki co nie znalazłem rozwiązania żeby to wszystko działało.





To mi się udało stworzyć jedynie, ale nie działa LINK 

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  3. <head>
  4.       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5.       <title>Untitled</title>
  6.  
  7.  
  8.       <style type="text/css"> 
  9. .przed02{
  10.  width:203px;
  11.  height:187px;
  12.  background-color: black;
  13.  float:left;
  14. }
  15. .przed02 > span > span{
  16.  width: 203px; 
  17.  height: 187px; 
  18. }
  19. .przed02 > span:hover > span{ 
  20.  display: block; 
  21.  margin-top: -124px;
  22.  cursor: pointer;
  23. }
  24. span.po02{
  25.   background-color: yellow; 
  26. }
  27.  
  28. #a2 { width: 203px; height: 187px; float:left;  background-color: black; }
  29.  
  30. #a2a { width: 95px; height: 42px; background-color: red; display: block; 
  31. margin-left: 65px; margin-top: 82px; filter:alpha(opacity=0); /* LUB opacity:.0; /*     } 
  32. </style> 
  33.  
  34.  
  35. </head>
  36.  
  37. <body>
  38.  
  39.  
  40. <div class="przed02">
  41. 		<span>
  42. 			<a href="http://www.onet.pl">
  43. 			<span id="a2a"></span>
  44. 			</a>
  45. 			<span class="po02"></span>
  46.  
  47. 		</span>
  48. 	</div>
  49.  
  50. </body>
  51. </html>
[HTML] pobierz, plaintext


Ten post edytował Damonsson 15.01.2010, 16:58:55
Go to the top of the page
+Quote Post
Volume
post 17.01.2010, 17:07:04
Post #2





Grupa: Zarejestrowani
Postów: 283
Pomógł: 11
Dołączył: 11.10.2004
Skąd: 3c

Ostrzeżenie: (10%)
X----

Moze tak: 
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  3. <head>
  4.       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5.       <title>Untitled</title>
  6.  
  7.  
  8.       <style type="text/css"> 
  9. * {
  10. 	margin: 0;
  11. 	padding: 0;
  12. }
  13. div#hover {
  14. 	width: 200px;
  15. 	height: 180px;
  16. 	background: black;
  17. 	position: relative;
  18. 	margin: 10px;
  19. }
  20. a {
  21. 	display: block;
  22. 	width: 50px;
  23. 	height: 40px;
  24. 	background: red;
  25. 	position: absolute;
  26. 	top: 40px;
  27. 	left: 50px;
  28. }
  29. a:hover {
  30. 	width: 200px;
  31. 	height: 180px;
  32. 	background: yellow;
  33. 	position: static;
  34. }
  35. </style> 
  36.  
  37.  
  38. </head>
  39.  
  40. <body>
  41.  
  42.  
  43. <div id="hover">
  44. <a href="http://onet.pl"></a>
  45. </div>
  46.  
  47. </body>
  48. </html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
Damonsson
post 17.01.2010, 17:58:38
Post #3





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

Ostrzeżenie: (0%)
-----

No właśnie nie, bo po Hover, Linkiem jest całe "żółte", a ma być tylko czerwone. Chyba że wtedy by z tym zółtym coś popróbować z mapą? Ale wątpie. Jak ktoś ma jakieś jeszcze pomysły chętnie poczytam. Bo ja szczerze przyznaję, że poległem na tym i nie znam rozwiązania sad.gif


Chwilowo rozwiązałem to tak:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  3. <head>
  4.       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5.       <title>Untitled</title>
  6.  
  7.  
  8.       <style type="text/css"> 
  9.  
  10.  
  11. /* Home */
  12. 		#image2 {
  13. 			float: left; display: block; margin: 0 auto; position: relative; width: 199px; height: 187px; 
  14. 			background-color: blue;  }
  15. 		#image2:hover {
  16. 			display: block; margin: 0 auto; position: relative; width: 199px; height: 187px;			
  17. 			background-color: yellow; 	}
  18. 		#image2 span {
  19. 			position: absolute; padding: 0; margin: 0; z-index: 10; }
  20. 		#image2 #a2 	{ left: 50px; top: 80px; } 
  21. 		#image2 span a {
  22. 			display: block; width: 120px; height: 50px; z-index: 10; position: relative; background-color: black;}	
  23.  
  24.  
  25. </style> 
  26.  
  27.  
  28. </head>
  29.  
  30. <body>
  31.  
  32. <div id="a22"> 
  33. 	<div id="image2">
  34. 		<span id="a2">
  35. 		<a href="index.html">
  36. 			<span></span>
  37. 		</a>
  38. 		</span>
  39. 	</div>
  40. 	</div>
  41. </body>
  42. </html>
[HTML] pobierz, plaintext


Tylko jeszcze do pełni szczęścia brakuje mi, żeby niebieski stawał się żółtym dopiero PO NAJECHANIU na czarny, a PO ZJECHANIU z czarnego - żółty stawał się z powrotem niebieskim. Jakieś pomysły? Bo ja wymiękłem.

Ten post edytował Damonsson 17.01.2010, 18:08:36
Go to the top of the page
+Quote Post
Volume
post 19.01.2010, 19:44:11
Post #4





Grupa: Zarejestrowani
Postów: 283
Pomógł: 11
Dołączył: 11.10.2004
Skąd: 3c

Ostrzeżenie: (10%)
X----

Aha sorki nie zrozumialem Cie, faktycznie osiagnac taki efekt nie jest tak prosto. Zrobilem dwie wersje nie jest to w 100% to co chcesz osiagnac ale wydaje mi sie ze juz blizsze:
W tej wersji niebiski zmienia sie na zolty po najechaniu na czarny srodek ale zolty zmieni sie na niebieski dopiero po wyjsciu z obrebu bloku diva (zeby bylo szybciej dalem tu jednostki w %):
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  3. <head>
  4.       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5.       <title>Untitled</title>
  6.  
  7.  
  8.       <style type="text/css"> 
  9. * {
  10. 	margin: 0;
  11. 	padding: 0;
  12. }
  13. div#hover {
  14. 	background: blue;
  15. 	width: 200px;
  16. 	height: 200px;
  17. 	text-align: center;
  18. 	position: relative;
  19. 	margin: 20px;
  20. }
  21. a {
  22. 	display: block;
  23. 	width: 100px;
  24. 	height: 100px;
  25. 	background: black;
  26. 	position: absolute;
  27. 	top: 25%;
  28. 	left: 25%;
  29. }
  30. span:hover {
  31. 	display: block;
  32. 	background: yellow;
  33. 	width: 100%;
  34. 	height: 100%;	
  35. }
  36.  
  37. </style> 
  38.  
  39.  
  40. </head>
  41.  
  42. <body>
  43.  
  44.  
  45.  
  46. <div id="hover"><span><a href="http://onet.pl"></a></span></div>
  47.  
  48.  
  49. </body>
  50. </html>
[HTML] pobierz, plaintext

W tej wersji pozycjonowalem puste spany - ale rowniez nie udalo mi sie osiagnac w 100% tego niebieskiego pola po opuszczeniu czarnego - jednak zrobilem mala sztuczke - dalem 2px "marginesu" miedzy czarnym srodkiem a zoltym tlem w ten sposob opuszczajac czarny srodek zniknie zolte tlo chyba ze zrobi sie to szybko to bywa ze niestety nie znika az do opusczenia diva...
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  3. <head>
  4.       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5.       <title>Untitled</title>
  6.  
  7.  
  8.       <style type="text/css"> 
  9. * {
  10. 	margin: 0;
  11. 	padding: 0;
  12. }
  13. div#hover {
  14. 	background: blue;
  15. 	width: 200px;
  16. 	height: 200px;
  17. 	text-align: center;
  18. 	position: relative;
  19. 	margin: 20px;
  20. }
  21. a {
  22. 	display: block;
  23. 	width: 100px;
  24. 	height: 100px;
  25. 	background: black;
  26. 	position: absolute;
  27. 	top: 25%;
  28. 	left: 25%;
  29. }
  30. a span {
  31. 	display: none;
  32. }
  33. a:hover span {
  34. 	display: block;
  35. 	position: absolute;
  36. 	background: yellow;
  37. }
  38. a:hover span#top {
  39. 	top: -50px;
  40. 	left: -50px;
  41. 	width: 200px;
  42. 	height: 48px;
  43. }
  44. a:hover span#bottom {
  45. 	bottom: -50px;
  46. 	left: -50px;
  47. 	width: 200px;
  48. 	height: 48px;
  49. }
  50. a:hover span#left {
  51. 	top: -4px;
  52. 	left: -50px;
  53. 	width: 48px;
  54. 	height: 108px;
  55. }
  56. a:hover span#right{
  57. 	top: -4px;
  58. 	right: -50px;
  59. 	width: 48px;
  60. 	height: 108px;
  61. }
  62.  
  63. </style> 
  64.  
  65.  
  66. </head>
  67.  
  68. <body>
  69.  
  70.  
  71.  
  72. <div id="hover"><a href="http://onet.pl"><span id="right"></span><span id="left"></span><span id="top"></span><span id="bottom"></span></a></div>
  73.  
  74.  
  75. </body>
  76. </html>
[HTML] pobierz, plaintext

No i trzeba dodac ze obydwa sposoby nie beda dzialac w IE ponizej 7.0 raz ze stary IE nie kuma hover dla innych znacznikow niz <a > a dwa ze ma problemy z pozycjonowaniem.

Ten post edytował Volume 19.01.2010, 19:48:05
Go to the top of the page
+Quote Post
Damonsson
post 19.01.2010, 20:20:53
Post #5





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

Ostrzeżenie: (0%)
-----

Ok, jednak wolę wersję nr1. Zresztą działa podobnie jak ten mój drugi przykład, więc pozostane przy tej wersji. Dzięki czarodziej.gif

Ten post edytował Damonsson 19.01.2010, 20:22:18
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 24.04.2024 - 18:43
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn