Drukowana wersja tematu

Kliknij tu, aby zobaczyć temat w orginalnym formacie

Forum PHP.pl _ Po stronie przeglądarki _ [CSS]Hover, ale skomplikowany

Napisany przez: Damonsson 15.01.2010, 16:46:09


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. <http://december.com/html/4/element/html.html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  3. <http://december.com/html/4/element/head.html>
  4.       <http://december.com/html/4/element/meta.html http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5.       <http://december.com/html/4/element/title.html>Untitled</http://december.com/html/4/element/title.html>
  6.  
  7.  
  8.       <http://december.com/html/4/element/style.html 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. </http://december.com/html/4/element/style.html> 
  33.  
  34.  
  35. </http://december.com/html/4/element/head.html>
  36.  
  37. <http://december.com/html/4/element/body.html>
  38.  
  39.  
  40. <http://december.com/html/4/element/div.html class="przed02">
  41. 		<http://december.com/html/4/element/span.html>
  42. 			<http://december.com/html/4/element/a.html href="http://www.onet.pl">
  43. 			<http://december.com/html/4/element/span.html id="a2a"></http://december.com/html/4/element/span.html>
  44. 			</http://december.com/html/4/element/a.html>
  45. 			<http://december.com/html/4/element/span.html class="po02"></http://december.com/html/4/element/span.html>
  46.  
  47. 		</http://december.com/html/4/element/span.html>
  48. 	</http://december.com/html/4/element/div.html>
  49.  
  50. </http://december.com/html/4/element/body.html>
  51. </http://december.com/html/4/element/html.html>
[HTML] pobierz, plaintext

Napisany przez: Volume 17.01.2010, 17:07:04

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. <http://december.com/html/4/element/html.html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  3. <http://december.com/html/4/element/head.html>
  4.       <http://december.com/html/4/element/meta.html http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5.       <http://december.com/html/4/element/title.html>Untitled</http://december.com/html/4/element/title.html>
  6.  
  7.  
  8.       <http://december.com/html/4/element/style.html 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. </http://december.com/html/4/element/style.html> 
  36.  
  37.  
  38. </http://december.com/html/4/element/head.html>
  39.  
  40. <http://december.com/html/4/element/body.html>
  41.  
  42.  
  43. <http://december.com/html/4/element/div.html id="hover">
  44. <http://december.com/html/4/element/a.html href="http://onet.pl"></http://december.com/html/4/element/a.html>
  45. </http://december.com/html/4/element/div.html>
  46.  
  47. </http://december.com/html/4/element/body.html>
  48. </http://december.com/html/4/element/html.html>
[HTML] pobierz, plaintext

Napisany przez: Damonsson 17.01.2010, 17:58:38

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. <http://december.com/html/4/element/html.html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  3. <http://december.com/html/4/element/head.html>
  4.       <http://december.com/html/4/element/meta.html http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5.       <http://december.com/html/4/element/title.html>Untitled</http://december.com/html/4/element/title.html>
  6.  
  7.  
  8.       <http://december.com/html/4/element/style.html 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. </http://december.com/html/4/element/style.html> 
  26.  
  27.  
  28. </http://december.com/html/4/element/head.html>
  29.  
  30. <http://december.com/html/4/element/body.html>
  31.  
  32. <http://december.com/html/4/element/div.html id="a22"> 
  33. 	<http://december.com/html/4/element/div.html id="image2">
  34. 		<http://december.com/html/4/element/span.html id="a2">
  35. 		<http://december.com/html/4/element/a.html href="index.html">
  36. 			<http://december.com/html/4/element/span.html></http://december.com/html/4/element/span.html>
  37. 		</http://december.com/html/4/element/a.html>
  38. 		</http://december.com/html/4/element/span.html>
  39. 	</http://december.com/html/4/element/div.html>
  40. 	</http://december.com/html/4/element/div.html>
  41. </http://december.com/html/4/element/body.html>
  42. </http://december.com/html/4/element/html.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.

Napisany przez: Volume 19.01.2010, 19:44:11

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. <http://december.com/html/4/element/html.html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  3. <http://december.com/html/4/element/head.html>
  4.       <http://december.com/html/4/element/meta.html http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5.       <http://december.com/html/4/element/title.html>Untitled</http://december.com/html/4/element/title.html>
  6.  
  7.  
  8.       <http://december.com/html/4/element/style.html 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. </http://december.com/html/4/element/style.html> 
  38.  
  39.  
  40. </http://december.com/html/4/element/head.html>
  41.  
  42. <http://december.com/html/4/element/body.html>
  43.  
  44.  
  45.  
  46. <http://december.com/html/4/element/div.html id="hover"><http://december.com/html/4/element/span.html><http://december.com/html/4/element/a.html href="http://onet.pl"></http://december.com/html/4/element/a.html></http://december.com/html/4/element/span.html></http://december.com/html/4/element/div.html>
  47.  
  48.  
  49. </http://december.com/html/4/element/body.html>
  50. </http://december.com/html/4/element/html.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. <http://december.com/html/4/element/html.html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  3. <http://december.com/html/4/element/head.html>
  4.       <http://december.com/html/4/element/meta.html http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5.       <http://december.com/html/4/element/title.html>Untitled</http://december.com/html/4/element/title.html>
  6.  
  7.  
  8.       <http://december.com/html/4/element/style.html 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. </http://december.com/html/4/element/style.html> 
  64.  
  65.  
  66. </http://december.com/html/4/element/head.html>
  67.  
  68. <http://december.com/html/4/element/body.html>
  69.  
  70.  
  71.  
  72. <http://december.com/html/4/element/div.html id="hover"><http://december.com/html/4/element/a.html href="http://onet.pl"><http://december.com/html/4/element/span.html id="right"></http://december.com/html/4/element/span.html><http://december.com/html/4/element/span.html id="left"></http://december.com/html/4/element/span.html><http://december.com/html/4/element/span.html id="top"></http://december.com/html/4/element/span.html><http://december.com/html/4/element/span.html id="bottom"></http://december.com/html/4/element/span.html></http://december.com/html/4/element/a.html></http://december.com/html/4/element/div.html>
  73.  
  74.  
  75. </http://december.com/html/4/element/body.html>
  76. </http://december.com/html/4/element/html.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.

Napisany przez: Damonsson 19.01.2010, 20:20:53

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

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)