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

  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. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>Untitled</title>
  5.  
  6.  
  7. <style type="text/css">
  8. .przed02{
  9. width:203px;
  10. height:187px;
  11. background-color: black;
  12. float:left;
  13. }
  14. .przed02 > span > span{
  15. width: 203px;
  16. height: 187px;
  17. }
  18. .przed02 > span:hover > span{
  19. display: block;
  20. margin-top: -124px;
  21. cursor: pointer;
  22. }
  23. span.po02{
  24. background-color: yellow;
  25. }
  26.  
  27. #a2 { width: 203px; height: 187px; float:left; background-color: black; }
  28.  
  29. #a2a { width: 95px; height: 42px; background-color: red; display: block;
  30. margin-left: 65px; margin-top: 82px; filter:alpha(opacity=0); /* LUB opacity:.0; /* }
  31. </style>
  32.  
  33.  
  34. </head>
  35.  
  36.  
  37.  
  38. <div class="przed02">
  39. <span>
  40. <a href="http://www.onet.pl">
  41. <span id="a2a"></span>
  42. </a>
  43. <span class="po02"></span>
  44.  
  45. </span>
  46. </div>
  47.  
  48. </body>
  49. </html>


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:
  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. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>Untitled</title>
  5.  
  6.  
  7. <style type="text/css">
  8. * {
  9. margin: 0;
  10. padding: 0;
  11. }
  12. div#hover {
  13. width: 200px;
  14. height: 180px;
  15. background: black;
  16. position: relative;
  17. margin: 10px;
  18. }
  19. a {
  20. display: block;
  21. width: 50px;
  22. height: 40px;
  23. background: red;
  24. position: absolute;
  25. top: 40px;
  26. left: 50px;
  27. }
  28. a:hover {
  29. width: 200px;
  30. height: 180px;
  31. background: yellow;
  32. position: static;
  33. }
  34. </style>
  35.  
  36.  
  37. </head>
  38.  
  39.  
  40.  
  41. <div id="hover">
  42. <a href="http://onet.pl"></a>
  43. </div>
  44.  
  45. </body>
  46. </html>
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:

  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. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>Untitled</title>
  5.  
  6.  
  7. <style type="text/css">
  8.  
  9.  
  10. /* Home */
  11. #image2 {
  12. float: left; display: block; margin: 0 auto; position: relative; width: 199px; height: 187px;
  13. background-color: blue; }
  14. #image2:hover {
  15. display: block; margin: 0 auto; position: relative; width: 199px; height: 187px;
  16. background-color: yellow; }
  17. #image2 span {
  18. position: absolute; padding: 0; margin: 0; z-index: 10; }
  19. #image2 #a2 { left: 50px; top: 80px; }
  20. #image2 span a {
  21. display: block; width: 120px; height: 50px; z-index: 10; position: relative; background-color: black;}
  22.  
  23.  
  24. </style>
  25.  
  26.  
  27. </head>
  28.  
  29.  
  30. <div id="a22">
  31. <div id="image2">
  32. <span id="a2">
  33. <a href="index.html">
  34. <span></span>
  35. </a>
  36. </span>
  37. </div>
  38. </div>
  39. </body>
  40. </html>


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 %):
  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. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>Untitled</title>
  5.  
  6.  
  7. <style type="text/css">
  8. * {
  9. margin: 0;
  10. padding: 0;
  11. }
  12. div#hover {
  13. background: blue;
  14. width: 200px;
  15. height: 200px;
  16. text-align: center;
  17. position: relative;
  18. margin: 20px;
  19. }
  20. a {
  21. display: block;
  22. width: 100px;
  23. height: 100px;
  24. background: black;
  25. position: absolute;
  26. top: 25%;
  27. left: 25%;
  28. }
  29. span:hover {
  30. display: block;
  31. background: yellow;
  32. width: 100%;
  33. height: 100%;
  34. }
  35.  
  36. </style>
  37.  
  38.  
  39. </head>
  40.  
  41.  
  42.  
  43.  
  44. <div id="hover"><span><a href="http://onet.pl"></a></span></div>
  45.  
  46.  
  47. </body>
  48. </html>

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...
  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. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>Untitled</title>
  5.  
  6.  
  7. <style type="text/css">
  8. * {
  9. margin: 0;
  10. padding: 0;
  11. }
  12. div#hover {
  13. background: blue;
  14. width: 200px;
  15. height: 200px;
  16. text-align: center;
  17. position: relative;
  18. margin: 20px;
  19. }
  20. a {
  21. display: block;
  22. width: 100px;
  23. height: 100px;
  24. background: black;
  25. position: absolute;
  26. top: 25%;
  27. left: 25%;
  28. }
  29. a span {
  30. display: none;
  31. }
  32. a:hover span {
  33. display: block;
  34. position: absolute;
  35. background: yellow;
  36. }
  37. a:hover span#top {
  38. top: -50px;
  39. left: -50px;
  40. width: 200px;
  41. height: 48px;
  42. }
  43. a:hover span#bottom {
  44. bottom: -50px;
  45. left: -50px;
  46. width: 200px;
  47. height: 48px;
  48. }
  49. a:hover span#left {
  50. top: -4px;
  51. left: -50px;
  52. width: 48px;
  53. height: 108px;
  54. }
  55. a:hover span#right{
  56. top: -4px;
  57. right: -50px;
  58. width: 48px;
  59. height: 108px;
  60. }
  61.  
  62. </style>
  63.  
  64.  
  65. </head>
  66.  
  67.  
  68.  
  69.  
  70. <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>
  71.  
  72.  
  73. </body>
  74. </html>

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

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

 



RSS Wersja Lo-Fi Aktualny czas: 19.09.2019 - 12:16