Support Center Visit Demo License manager Buy @ envato

pseudoelement color

dino127dino127
in Fonts
Muffin, hi! Need a little help.
A few times faced with a CSS problem concerning pseudo-element color change on hover. For example - the button Back to Top. If I want to change arrow up color on hover - how can I do that? That is pseudo-element and any styles ::hover::after do not work... A few like this situations was with control buttons in sliders. When the button is light - gray arrows are looking fine, but if I want on hover to change the button background - no problem, but to change arrow color on hover - problem...

Comments

  • BryanBryan
    Hi,
    You can do that simply by adding :hover or :active
    Read more about pseudoclasses here:
    thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • dino127dino127
    )) or no... Muffin - I know  pseudoclasses )) But they do not work. If that was so simple I would write for example:
    some_my_class::hover::after {color: red;}
    But! the metter is as follow that you use element <i class="arrow-up"></i>
    And it does not react at any css! Simply try to change arrow up color at hover in Back to Top button - and you will realize what the problem is...
  • BryanBryan
    :hover not ::hover
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • dino127dino127
    edited March 2017
    ufff - are You serious?
    I spent about 2 hours - nothing, and you simple: :hover not ::hover...
    I tried all combinations, but it seems - that impossible to do...
    Try yourself to change arrow color - and show that in even one theme...

    Yours code: <a id="back_to_top" class="button button_js" href=""><i class="icon-up-open-big">::before</i>::after</a>
    and css:
    #back_to_top > i {
        color: rgba(0,0,0,.5);
    }
    Show please how to make that arrow red on hover. The simplest task - but try!
    And I should use ::hover, not :hover - that pseudoelement, but as I understood - css will not work at them in such environment ... May be I am wrong?
  • BryanBryan
    Gladly, but please send the link to your website so I can test it out.
    thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • dino127dino127
    sure, I can provide the full access: ( but this is not because of my realization - that Be theme native code, it is in every example, in yours variant also/ The matter is as follows: The arrow color goes from #back_to_top > i, while the image - from  ::after pseudoelement. But hover acts on a...  And this situation repeats with all sliders arrows... I want to make that arrow white at dark background on Hover... But - this is very difficult...  )

    http://palochniki.istaiga.online/

  • BryanBryan
    Please send us the access my college ask with all necessary details so we can take a look closer.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • dino127dino127
    edited March 2017
    No problem:

    uff ... - all done at last! forget that, thanks for support and wish to help!
    I just did not pay attention at very close color range from a:hover and #back_to_top > i. Then with color picker noticed change and realize:
    When #back_to_top > i   has css color style - nothing will help... (! and that go from your layout.css:1456;) neither any hover, nor playing with pseudo... (it inherited with ::before and ::after) .
    I have to switch #back_to_top > i  to color: inherit !important; in my child css, otherwise - impossible or strange logic of darking or lighting (may be you are able to explain )
     
    Only after that  <a>  started to work as expected... Thank you again!

    If you wanted to see something - access is active...



  • BryanBryan
    So it worked? Right?
    You changed it yourself?
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • dino127dino127
    Yes! it work as I wanted now. Thank you!
Sign In or Register to comment.