Απλη jQuery ερωτηση για CSS :before που δεν δουλευει.

[Ruhl]

Εχω τον εξης κωδικα οποιος κανει "fill" στην ουσια εναν  h1 τιτλο με αλλο χρωμα στο hover ολα καλα εδω,

αυτο που δεν μπορω να κανω ειναι να γινεται το ιδιο effect οταν κανω Hover το γενικο div 
δεν ξερω κιολας αν γινεται να "στοχευσεις" το :before :after στο jQuery.

HTML

<div class="col-lg-4 hoverFILL"> 
          <h1 class="text-center" data-text="Τιμοκαταλογος">Τιμοκαταλογος</h1>
           <table class="table table-hover">
    <tbody >
      <tr>
        <td>Green</td>
        <td style="text-align: right;">13 €</td>
        </tr>
      <tr>
        <td>Red</td>
        <td style="text-align: right;">15 €</td>
      </tr>
      <tr>
        <td>Black</td>
       <td style="text-align: right;">17 €</td>
      </tr>
    </tbody>
  </table>
           </div><!--col-4 -->

CSS

.hoverFILL h1{
    position: absolute;
    top:-17%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-transform: uppercase;
}

.hoverFILL h1:before{
    content: attr(data-text);
    position: absolute;
    color: #FF027F;
    width: 0%;
    overflow: hidden;
    transition: 1s;
}


.hoverFILL h1:hover:before{
     width: 100%;
}

jQuery- Ναι προφανως δεν δουλευει ετσι , αλλα αυτο θελω να κανει , στην ουσια η τελευταια γραμμη css να ενεργοποιειται και οταν γινεται hover ολο το div  η μονο αυτο γιατι ειναι το ιδιο εφοσον ειναι εκει μεσα το  <h1>

$(".hoverFILL").hover(
  function(){
  	   $(".hoverFILL h1:before").css("width", "100%");
   });

[dominotrix]

Δεν καταλαβα ακριβως τι θελεις να κανεις. Μιλας για αλλαγη χρωματος, αλλα εβαλες width οχι color.

 

Αν θελεις ενα class να αλλαζει καποιο property του, εφοσον ειναι μεσα στο parent div, τοτε το:

 

.hoverFILL:hover h1{color:red;}

 

Θα λειτουργει σωστα γιατι του λες αν γινει hover ΟΛΟ το div τοτε να αλλαξει το color ΜΟΝΟ στο H1 μιας και το :hover δε το εβαλα στο h1 αλλα στο .hoverFILL που ειναι το class ολου του div. Δε χρειαζεσαι jQuery.

 

Αν καταλαβα λαθος εξηγησε λιγο καλυτερα (ισως με καποιo codepen.io)

[Ruhl]

Δεν καταλαβα ακριβως τι θελεις να κανεις. Μιλας για αλλαγη χρωματος, αλλα εβαλες width οχι color.

 

Αν θελεις ενα class να αλλαζει καποιο property του, εφοσον ειναι μεσα στο parent div, τοτε το:

 

.hoverFILL:hover h1{color:red;}

 

Θα λειτουργει σωστα γιατι του λες αν γινει hover ΟΛΟ το div τοτε να αλλαξει το color ΜΟΝΟ στο H1 μιας και το :hover δε το εβαλα στο h1 αλλα στο .hoverFILL που ειναι το class ολου του div. Δε χρειαζεσαι jQuery.

 

Αν καταλαβα λαθος εξηγησε λιγο καλυτερα (ισως με καποιo codepen.io)

Ναι δεν το καταλαβες καλα

στην ουσια ειναι 2 λεξεις ιδιες 1 πανω στην αλλη, μια μαυρη και με το :before element ακομα μια μοβ και οταν βαζω πανω στο hover width φενετε αυτο (γεμιζει ολο μαζι με το transition για αυτο  τραβηξα print πιο νωρις να καταλαβεις καλυτερα ,το width 100% για αυτο το λογο υπαρχει)

 

Οπως ειναι τωρα οταν βαζω το ποντικι στο h1 γινεται αυτο στην φωτο, αλλα εγω θελω να βαζω το ποντικι και στο table(ολο το γενικο div δηλαδη που ειναι ολα εκει μεσα ολη την περιοχη )και παλι να ενεργοποιειτε αυτο το γραφικο. 

 

https://codepen.io/ruhl/pen/zzmedw

 

(δεν εβαλα jQuery γιατι δν μου τρεχει ετσι και αλλιως)

 

 

 

[dominotrix]

Απλα προσθεσε αυτο:

 

.hoverFILL:hover h1:before{

     width: 100%;

}

 

Το παραπανω λεει στην ουσια: αν κανεις HOVER στο .hoverFILL τοτε η εντολη width:100% θα ισχυσει στο h1:before

[Ruhl]

 

Απλα προσθεσε αυτο:

 

.hoverFILL:hover h1:before{

     width: 100%;

}

 

Το παραπανω λεει στην ουσια: αν κανεις HOVER στο .hoverFILL τοτε η εντολη width:100% θα ισχυσει στο h1:before

 

 

Ευχαριστω παρα πολυ δουλεψε , δεν γνωριζα για τετοιο συνδιασμο.