Ergebnis 1 bis 1 von 1
  1. #1
    jeffglennfox ist offline Eroberer
    registriert
    08-08-2008
    Beiträge
    57

    DIV-Element als Link - Problem mit Hover und Änderung der Textfarbe

    Hallo,

    ich bastele gerade eine Navigation. Hierbei erstelle ich die Grafiken mittels CSS innerhalb eines DIV-Elements. Zunächts der Code:

    HTML-Code:
    <style
    
    .pagination {
    
     text-align:center;
     list-style:none;
     display:flex;
     justify-content: center;
     align-items:center;
    
    }
    
    .pagination li {
    
     border:1px solid;
     margin-right:4px;
     padding: 2px 8px;
     font-size:18px;
     background-color:#eeeeee;
     border-color: #c9c9c9;
     color:#003399;
    
    }
    
    .pagination li:not(.pagination-spacer):hover { 
    
     background-color:#F9E1E1;
     border-color:#f08080;
     color:#ff0000 !important;
    
    }
    
    .pagination-arrow {
      width: 0;
      height: 0;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-right: 14px solid #0044aa;
      padding:0px 6px;
    
    }
    
    .pagination-arrow:hover {
    
     border-right: 14px solid #ff0000;
    
    }
    
    .pagination-arrow > a {
    
     display:block;
     width:24px;
     height:24px;
     margin-top:-13px;
    
    }
    
    
    .pagination-start {
    
     margin-right:9px;
    
    }
    
    .pagination-end {
    
     CSS-moz-transform: rotate(180deg);
     -ms-transform: rotate(180deg);
     -o-transform: rotate(180deg);
     -webkit-transform: rotate(180deg);
     margin-left:5px;
    
    }
    
    
    .pagination-spacer {
    
     background:#fff !important;
     padding:2px 3px !important;
     color:#bbb !important;
     border-color:#ddd !important;
    
    }
    
    </style>
    
    <ul class="pagination">
    
    <div class="pagination-arrow pagination-start"><a href=""></a></div>
    <li><a href="">1</a></li>
    <li class="pagination-spacer">...</li>
    <li><a href="">4</a></li>
    <li><a href="">5</a></li>
    <li><a href="">6</a></li>
    <li><a href="">7</a></li>
    <li><a href="">8</a></li>
    <li><a href="">9</a></li>
    <li class="pagination-spacer">...</li>
    <li><a href="">15</a></li>
    <div class="pagination-arrow pagination-end"><a href=""></a></div>
    
    <ul>
    
    Dabei möchte ich folgendes Problem lösen:

    Bereits beim Überfahren des <li>-Elements welches eine Seitenzahl enthält und nicht erst beim Überfahren der Zahl (also des Links) soll auch die Schrift rot gefärbt werden, was mit dem Rahmen und Hintergrund ja wunderbar klappt. Versucht habe ich folgendes:

    HTML-Code:
    .pagination li:not(.pagination-spacer):hover { 
    
     background-color:#F9E1E1;
     border-color:#f08080;
     color:#ff0000 !important;  <!-- Keine Wirkung ! -->
    
    }
    Andere Möglichkeit: Das <a>-Element als Block-Element behandeln und eine feste Größe zuweisen:

    HTML-Code:
    .pagination a {
    
     display:block;
     width:100%;
     height:20px;
    
    }
    ist auch nicht die perfekte Lösung, da hier die inneren Seitenabstände kein perfektes Ergebnis zulassen.

    Hat jemand eine Idee, wie man hier weiterkommt ?

    Gruss

    von Markus

    - - - Aktualisiert - - -

    Ich habe nochmal darüber nachgedacht:

    HTML-Code:
    .pagination li:not(.pagination-spacer):hover { 
    
     background-color:#F9E1E1;
     border-color:#f08080;
     color:#ff0000 !important;  <!-- Änderung nur der Schriftfarbe ! -->
    
    }
    Da es sich ja letztendlich um einen Link handelt bewirkt eine Änderung der Schriftfarbe eher wenig. Also muss die Fragestellung heißen, wie ich die Farbe der LINKS im Zustand 'hover' der Elemente "pagination li" (und nicht die Schriftfarbe allgemein) ändern kann an dieser Stelle.

    Für weitere Lösungshinweise bin ich äußerst dankbar.

    Gruss

    von Markus

    - - - Aktualisiert - - -

    Manchmal hilft nur genug nachdenken. Mit diesen Änderungen funktioniert es wie gewünscht.

    HTML-Code:
    .pagination {
    
     text-align:center;
     list-style:none;
     display:flex;
     justify-content: center;
     align-items:center;
     flex-wrap: wrap;
    
    }
    
    
    .pagination li {
    
     display:block;
     border:1px solid;
     margin-right:4px;
     font-size:16px;
     background-color:#eeeeee;
     border-color: #c9c9c9;
     color:#003399;
    
    }
    
    
    .pagination li a {
    
     display:block;
     padding: 4px 10px;
    
    }
    
    .pagination li:hover { 
    
     background-color:#F9E1E1;
     border-color:#f08080;
    
    }
    
    
    .pagination-arrow {
      width: 0px;
      height: 0px;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-right: 14px solid #0044aa;
      padding:0px 6px;
    
    }
    
    .pagination-arrow:hover {
    
     border-right: 14px solid #ff0000;
    
    }
    
    .pagination-arrow  a {
    
     display:block !important;
     width:5px !important;
     height:5px !important;
     margin-top: -13px;
    
    
    }
    
    
    .pagination-start {
    
     margin-right:9px;
    
    }
    
    .pagination-end {
    
     CSS-moz-transform: rotate(180deg);
     -ms-transform: rotate(180deg);
     -o-transform: rotate(180deg);
     -webkit-transform: rotate(180deg);
     margin-left:5px;
    
    }
    
    .pagination-spacer {
    
     background:#fff !important;
     padding:4px 5px !important;
     color:#bbb !important;
     border-color:#ddd !important;
    
    }
    Geändert von jeffglennfox (23-02-2018 um 01:30 Uhr)

Ähnliche Themen

  1. Antworten: 3
    Letzter Beitrag: 23-10-2015, 21:39
  2. Antworten: 12
    Letzter Beitrag: 18-06-2014, 15:49
  3. Antworten: 5
    Letzter Beitrag: 01-10-2013, 01:54
  4. Antworten: 2
    Letzter Beitrag: 29-08-2007, 12:40
  5. Wechsel der Textfarbe (Link) bei Mouseover
    Von jammann im Forum Allgemeines
    Antworten: 3
    Letzter Beitrag: 01-02-2002, 21:36

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •