How do You Change Content in CSS When Hovering?










3














How can I replace text with CSS using content?



Also just FYI don't worry about the .fab or Font Awesome unless you also know how to fix that. And if you can fix the JavaScript that'd be great too.



To use Font Awesome in your HTML put



<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">


in your head tag.






.sell 
margin: -20px auto;
width: 300px;
height: 30px;
background-color: #FDFEFE;
border: 2px solid #FDFEFE;
border-radius: 5px;


.styff
font-size: 20px;
padding: 5px;
position: relative;
text-align: center;
margin: 0 auto;


.styff:hover:after
font-size: 20px;
padding: 5px;
font-family: Font Awesome 5 Free;
position: relative;
text-align: center;
margin: 0 auto;
content: "This is currently not available in the App Store f370";


.fab
color: #29B6F6;

<div class="sell">
<p class="styff">Buy now in the App Store <i class="fab fa-app-store-ios fa-lg"></i></p>
</div>












share|improve this question























  • This issue has been fixed.
    – Jacob Lamb
    Nov 12 at 15:32















3














How can I replace text with CSS using content?



Also just FYI don't worry about the .fab or Font Awesome unless you also know how to fix that. And if you can fix the JavaScript that'd be great too.



To use Font Awesome in your HTML put



<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">


in your head tag.






.sell 
margin: -20px auto;
width: 300px;
height: 30px;
background-color: #FDFEFE;
border: 2px solid #FDFEFE;
border-radius: 5px;


.styff
font-size: 20px;
padding: 5px;
position: relative;
text-align: center;
margin: 0 auto;


.styff:hover:after
font-size: 20px;
padding: 5px;
font-family: Font Awesome 5 Free;
position: relative;
text-align: center;
margin: 0 auto;
content: "This is currently not available in the App Store f370";


.fab
color: #29B6F6;

<div class="sell">
<p class="styff">Buy now in the App Store <i class="fab fa-app-store-ios fa-lg"></i></p>
</div>












share|improve this question























  • This issue has been fixed.
    – Jacob Lamb
    Nov 12 at 15:32













3












3








3


1





How can I replace text with CSS using content?



Also just FYI don't worry about the .fab or Font Awesome unless you also know how to fix that. And if you can fix the JavaScript that'd be great too.



To use Font Awesome in your HTML put



<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">


in your head tag.






.sell 
margin: -20px auto;
width: 300px;
height: 30px;
background-color: #FDFEFE;
border: 2px solid #FDFEFE;
border-radius: 5px;


.styff
font-size: 20px;
padding: 5px;
position: relative;
text-align: center;
margin: 0 auto;


.styff:hover:after
font-size: 20px;
padding: 5px;
font-family: Font Awesome 5 Free;
position: relative;
text-align: center;
margin: 0 auto;
content: "This is currently not available in the App Store f370";


.fab
color: #29B6F6;

<div class="sell">
<p class="styff">Buy now in the App Store <i class="fab fa-app-store-ios fa-lg"></i></p>
</div>












share|improve this question















How can I replace text with CSS using content?



Also just FYI don't worry about the .fab or Font Awesome unless you also know how to fix that. And if you can fix the JavaScript that'd be great too.



To use Font Awesome in your HTML put



<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">


in your head tag.






.sell 
margin: -20px auto;
width: 300px;
height: 30px;
background-color: #FDFEFE;
border: 2px solid #FDFEFE;
border-radius: 5px;


.styff
font-size: 20px;
padding: 5px;
position: relative;
text-align: center;
margin: 0 auto;


.styff:hover:after
font-size: 20px;
padding: 5px;
font-family: Font Awesome 5 Free;
position: relative;
text-align: center;
margin: 0 auto;
content: "This is currently not available in the App Store f370";


.fab
color: #29B6F6;

<div class="sell">
<p class="styff">Buy now in the App Store <i class="fab fa-app-store-ios fa-lg"></i></p>
</div>








.sell 
margin: -20px auto;
width: 300px;
height: 30px;
background-color: #FDFEFE;
border: 2px solid #FDFEFE;
border-radius: 5px;


.styff
font-size: 20px;
padding: 5px;
position: relative;
text-align: center;
margin: 0 auto;


.styff:hover:after
font-size: 20px;
padding: 5px;
font-family: Font Awesome 5 Free;
position: relative;
text-align: center;
margin: 0 auto;
content: "This is currently not available in the App Store f370";


.fab
color: #29B6F6;

<div class="sell">
<p class="styff">Buy now in the App Store <i class="fab fa-app-store-ios fa-lg"></i></p>
</div>





.sell 
margin: -20px auto;
width: 300px;
height: 30px;
background-color: #FDFEFE;
border: 2px solid #FDFEFE;
border-radius: 5px;


.styff
font-size: 20px;
padding: 5px;
position: relative;
text-align: center;
margin: 0 auto;


.styff:hover:after
font-size: 20px;
padding: 5px;
font-family: Font Awesome 5 Free;
position: relative;
text-align: center;
margin: 0 auto;
content: "This is currently not available in the App Store f370";


.fab
color: #29B6F6;

<div class="sell">
<p class="styff">Buy now in the App Store <i class="fab fa-app-store-ios fa-lg"></i></p>
</div>






javascript html css






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 12 at 15:32

























asked Nov 12 at 14:15









Jacob Lamb

215




215











  • This issue has been fixed.
    – Jacob Lamb
    Nov 12 at 15:32
















  • This issue has been fixed.
    – Jacob Lamb
    Nov 12 at 15:32















This issue has been fixed.
– Jacob Lamb
Nov 12 at 15:32




This issue has been fixed.
– Jacob Lamb
Nov 12 at 15:32












4 Answers
4






active

oldest

votes


















0














You need two versions of content for hovering and normal.






.sell 
margin: -20px auto;
width: 300px;
height: 30px;
background-color: #FDFEFE;
border: 2px solid #FDFEFE;
border-radius: 5px;


.styff
font-size: 20px;
padding: 5px;
position: relative;
text-align: center;
margin: 0 auto;


/*.styff:hover:after
font-size: 20px;
padding: 5px;
font-family: Font Awesome 5 Free;
position: relative;
text-align: center;
margin: 0 auto;
content: "This is currently not available in the App Store f370";
*/

.fab
color: #29B6F6;

/* that's new */
.sell:hover .styff.hide_on_hover
display: none;

.sell .styff.on_hover_only
display: none;

.sell:hover .styff.on_hover_only
display: block;

<div class="sell">
<p class="styff hide_on_hover">Buy now in the App Store <i class="fab fa-app-store-ios fa-lg"></i></p>
<p class="styff on_hover_only">Not buy for your sane!</p>
</div>








share|improve this answer




























    1

















    .sell 
    margin: -20px auto;
    width: 300px;
    height: 30px;
    background-color: #FDFEFE;
    border: 2px solid #FDFEFE;
    border-radius: 5px;


    .styff
    font-size: 20px;
    padding: 5px;
    position: relative;
    text-align: center;
    margin: 0 auto;


    .styff:after
    content: 'Buy now in the App Store';
    font-size: 20px;
    padding: 5px;
    position: relative;
    text-align: center;
    margin: 0 auto;


    .styff:hover:after
    content: "This is currently not available in the App Store";

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

    <div class="sell">
    <p class="styff"><i class="fab fa-app-store-ios fa-lg"></i></p>
    </div>





    You can use :before & :after pseudo elements for this.






    share|improve this answer




























      0














      Add additional span to to your HTML, on hover hide that span:






      .sell 
      margin: -20px auto;
      width: 300px;
      height: 30px;
      background-color: #FDFEFE;
      border: 2px solid #FDFEFE;
      border-radius: 5px;


      .styff
      font-size: 20px;
      padding: 5px;
      position: relative;
      text-align: center;
      margin: 0 auto;


      .styff:hover .text-to-hide
      display: none;

      .styff:hover:after
      font-size: 20px;
      padding: 5px;
      font-family: Font Awesome 5 Free;
      position: relative;
      text-align: center;
      margin: 0 auto;
      content: "This is currently not available in the App Store f370";


      .fab
      color: #29B6F6;

      <div class="sell">
      <p class="styff"><span class="text-to-hide">Buy now in the App Store</span>
      <i class="fab fa-app-store-ios fa-lg"></i></p>
      </div>








      share|improve this answer




























        0














        try adding the following



         .styff:hover
        font-size:0;



        https://jsfiddle.net/bqgfn56o/






        share|improve this answer






















        • It will set font-size 0 to pseudo elements too
          – Justinas
          Nov 12 at 14:22










        • Check the fiddle, it does not (since font-size is already set on after) (sry for not including it before)
          – Josu Astigarraga
          Nov 12 at 14:24











        Your Answer






        StackExchange.ifUsing("editor", function ()
        StackExchange.using("externalEditor", function ()
        StackExchange.using("snippets", function ()
        StackExchange.snippets.init();
        );
        );
        , "code-snippets");

        StackExchange.ready(function()
        var channelOptions =
        tags: "".split(" "),
        id: "1"
        ;
        initTagRenderer("".split(" "), "".split(" "), channelOptions);

        StackExchange.using("externalEditor", function()
        // Have to fire editor after snippets, if snippets enabled
        if (StackExchange.settings.snippets.snippetsEnabled)
        StackExchange.using("snippets", function()
        createEditor();
        );

        else
        createEditor();

        );

        function createEditor()
        StackExchange.prepareEditor(
        heartbeatType: 'answer',
        autoActivateHeartbeat: false,
        convertImagesToLinks: true,
        noModals: true,
        showLowRepImageUploadWarning: true,
        reputationToPostImages: 10,
        bindNavPrevention: true,
        postfix: "",
        imageUploader:
        brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
        contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
        allowUrls: true
        ,
        onDemand: true,
        discardSelector: ".discard-answer"
        ,immediatelyShowMarkdownHelp:true
        );



        );













        draft saved

        draft discarded


















        StackExchange.ready(
        function ()
        StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53264026%2fhow-do-you-change-content-in-css-when-hovering%23new-answer', 'question_page');

        );

        Post as a guest















        Required, but never shown

























        4 Answers
        4






        active

        oldest

        votes








        4 Answers
        4






        active

        oldest

        votes









        active

        oldest

        votes






        active

        oldest

        votes









        0














        You need two versions of content for hovering and normal.






        .sell 
        margin: -20px auto;
        width: 300px;
        height: 30px;
        background-color: #FDFEFE;
        border: 2px solid #FDFEFE;
        border-radius: 5px;


        .styff
        font-size: 20px;
        padding: 5px;
        position: relative;
        text-align: center;
        margin: 0 auto;


        /*.styff:hover:after
        font-size: 20px;
        padding: 5px;
        font-family: Font Awesome 5 Free;
        position: relative;
        text-align: center;
        margin: 0 auto;
        content: "This is currently not available in the App Store f370";
        */

        .fab
        color: #29B6F6;

        /* that's new */
        .sell:hover .styff.hide_on_hover
        display: none;

        .sell .styff.on_hover_only
        display: none;

        .sell:hover .styff.on_hover_only
        display: block;

        <div class="sell">
        <p class="styff hide_on_hover">Buy now in the App Store <i class="fab fa-app-store-ios fa-lg"></i></p>
        <p class="styff on_hover_only">Not buy for your sane!</p>
        </div>








        share|improve this answer

























          0














          You need two versions of content for hovering and normal.






          .sell 
          margin: -20px auto;
          width: 300px;
          height: 30px;
          background-color: #FDFEFE;
          border: 2px solid #FDFEFE;
          border-radius: 5px;


          .styff
          font-size: 20px;
          padding: 5px;
          position: relative;
          text-align: center;
          margin: 0 auto;


          /*.styff:hover:after
          font-size: 20px;
          padding: 5px;
          font-family: Font Awesome 5 Free;
          position: relative;
          text-align: center;
          margin: 0 auto;
          content: "This is currently not available in the App Store f370";
          */

          .fab
          color: #29B6F6;

          /* that's new */
          .sell:hover .styff.hide_on_hover
          display: none;

          .sell .styff.on_hover_only
          display: none;

          .sell:hover .styff.on_hover_only
          display: block;

          <div class="sell">
          <p class="styff hide_on_hover">Buy now in the App Store <i class="fab fa-app-store-ios fa-lg"></i></p>
          <p class="styff on_hover_only">Not buy for your sane!</p>
          </div>








          share|improve this answer























            0












            0








            0






            You need two versions of content for hovering and normal.






            .sell 
            margin: -20px auto;
            width: 300px;
            height: 30px;
            background-color: #FDFEFE;
            border: 2px solid #FDFEFE;
            border-radius: 5px;


            .styff
            font-size: 20px;
            padding: 5px;
            position: relative;
            text-align: center;
            margin: 0 auto;


            /*.styff:hover:after
            font-size: 20px;
            padding: 5px;
            font-family: Font Awesome 5 Free;
            position: relative;
            text-align: center;
            margin: 0 auto;
            content: "This is currently not available in the App Store f370";
            */

            .fab
            color: #29B6F6;

            /* that's new */
            .sell:hover .styff.hide_on_hover
            display: none;

            .sell .styff.on_hover_only
            display: none;

            .sell:hover .styff.on_hover_only
            display: block;

            <div class="sell">
            <p class="styff hide_on_hover">Buy now in the App Store <i class="fab fa-app-store-ios fa-lg"></i></p>
            <p class="styff on_hover_only">Not buy for your sane!</p>
            </div>








            share|improve this answer












            You need two versions of content for hovering and normal.






            .sell 
            margin: -20px auto;
            width: 300px;
            height: 30px;
            background-color: #FDFEFE;
            border: 2px solid #FDFEFE;
            border-radius: 5px;


            .styff
            font-size: 20px;
            padding: 5px;
            position: relative;
            text-align: center;
            margin: 0 auto;


            /*.styff:hover:after
            font-size: 20px;
            padding: 5px;
            font-family: Font Awesome 5 Free;
            position: relative;
            text-align: center;
            margin: 0 auto;
            content: "This is currently not available in the App Store f370";
            */

            .fab
            color: #29B6F6;

            /* that's new */
            .sell:hover .styff.hide_on_hover
            display: none;

            .sell .styff.on_hover_only
            display: none;

            .sell:hover .styff.on_hover_only
            display: block;

            <div class="sell">
            <p class="styff hide_on_hover">Buy now in the App Store <i class="fab fa-app-store-ios fa-lg"></i></p>
            <p class="styff on_hover_only">Not buy for your sane!</p>
            </div>








            .sell 
            margin: -20px auto;
            width: 300px;
            height: 30px;
            background-color: #FDFEFE;
            border: 2px solid #FDFEFE;
            border-radius: 5px;


            .styff
            font-size: 20px;
            padding: 5px;
            position: relative;
            text-align: center;
            margin: 0 auto;


            /*.styff:hover:after
            font-size: 20px;
            padding: 5px;
            font-family: Font Awesome 5 Free;
            position: relative;
            text-align: center;
            margin: 0 auto;
            content: "This is currently not available in the App Store f370";
            */

            .fab
            color: #29B6F6;

            /* that's new */
            .sell:hover .styff.hide_on_hover
            display: none;

            .sell .styff.on_hover_only
            display: none;

            .sell:hover .styff.on_hover_only
            display: block;

            <div class="sell">
            <p class="styff hide_on_hover">Buy now in the App Store <i class="fab fa-app-store-ios fa-lg"></i></p>
            <p class="styff on_hover_only">Not buy for your sane!</p>
            </div>





            .sell 
            margin: -20px auto;
            width: 300px;
            height: 30px;
            background-color: #FDFEFE;
            border: 2px solid #FDFEFE;
            border-radius: 5px;


            .styff
            font-size: 20px;
            padding: 5px;
            position: relative;
            text-align: center;
            margin: 0 auto;


            /*.styff:hover:after
            font-size: 20px;
            padding: 5px;
            font-family: Font Awesome 5 Free;
            position: relative;
            text-align: center;
            margin: 0 auto;
            content: "This is currently not available in the App Store f370";
            */

            .fab
            color: #29B6F6;

            /* that's new */
            .sell:hover .styff.hide_on_hover
            display: none;

            .sell .styff.on_hover_only
            display: none;

            .sell:hover .styff.on_hover_only
            display: block;

            <div class="sell">
            <p class="styff hide_on_hover">Buy now in the App Store <i class="fab fa-app-store-ios fa-lg"></i></p>
            <p class="styff on_hover_only">Not buy for your sane!</p>
            </div>






            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Nov 12 at 14:28









            A. Denis

            32012




            32012























                1

















                .sell 
                margin: -20px auto;
                width: 300px;
                height: 30px;
                background-color: #FDFEFE;
                border: 2px solid #FDFEFE;
                border-radius: 5px;


                .styff
                font-size: 20px;
                padding: 5px;
                position: relative;
                text-align: center;
                margin: 0 auto;


                .styff:after
                content: 'Buy now in the App Store';
                font-size: 20px;
                padding: 5px;
                position: relative;
                text-align: center;
                margin: 0 auto;


                .styff:hover:after
                content: "This is currently not available in the App Store";

                <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

                <div class="sell">
                <p class="styff"><i class="fab fa-app-store-ios fa-lg"></i></p>
                </div>





                You can use :before & :after pseudo elements for this.






                share|improve this answer

























                  1

















                  .sell 
                  margin: -20px auto;
                  width: 300px;
                  height: 30px;
                  background-color: #FDFEFE;
                  border: 2px solid #FDFEFE;
                  border-radius: 5px;


                  .styff
                  font-size: 20px;
                  padding: 5px;
                  position: relative;
                  text-align: center;
                  margin: 0 auto;


                  .styff:after
                  content: 'Buy now in the App Store';
                  font-size: 20px;
                  padding: 5px;
                  position: relative;
                  text-align: center;
                  margin: 0 auto;


                  .styff:hover:after
                  content: "This is currently not available in the App Store";

                  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

                  <div class="sell">
                  <p class="styff"><i class="fab fa-app-store-ios fa-lg"></i></p>
                  </div>





                  You can use :before & :after pseudo elements for this.






                  share|improve this answer























                    1












                    1








                    1









                    .sell 
                    margin: -20px auto;
                    width: 300px;
                    height: 30px;
                    background-color: #FDFEFE;
                    border: 2px solid #FDFEFE;
                    border-radius: 5px;


                    .styff
                    font-size: 20px;
                    padding: 5px;
                    position: relative;
                    text-align: center;
                    margin: 0 auto;


                    .styff:after
                    content: 'Buy now in the App Store';
                    font-size: 20px;
                    padding: 5px;
                    position: relative;
                    text-align: center;
                    margin: 0 auto;


                    .styff:hover:after
                    content: "This is currently not available in the App Store";

                    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

                    <div class="sell">
                    <p class="styff"><i class="fab fa-app-store-ios fa-lg"></i></p>
                    </div>





                    You can use :before & :after pseudo elements for this.






                    share|improve this answer















                    .sell 
                    margin: -20px auto;
                    width: 300px;
                    height: 30px;
                    background-color: #FDFEFE;
                    border: 2px solid #FDFEFE;
                    border-radius: 5px;


                    .styff
                    font-size: 20px;
                    padding: 5px;
                    position: relative;
                    text-align: center;
                    margin: 0 auto;


                    .styff:after
                    content: 'Buy now in the App Store';
                    font-size: 20px;
                    padding: 5px;
                    position: relative;
                    text-align: center;
                    margin: 0 auto;


                    .styff:hover:after
                    content: "This is currently not available in the App Store";

                    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

                    <div class="sell">
                    <p class="styff"><i class="fab fa-app-store-ios fa-lg"></i></p>
                    </div>





                    You can use :before & :after pseudo elements for this.






                    .sell 
                    margin: -20px auto;
                    width: 300px;
                    height: 30px;
                    background-color: #FDFEFE;
                    border: 2px solid #FDFEFE;
                    border-radius: 5px;


                    .styff
                    font-size: 20px;
                    padding: 5px;
                    position: relative;
                    text-align: center;
                    margin: 0 auto;


                    .styff:after
                    content: 'Buy now in the App Store';
                    font-size: 20px;
                    padding: 5px;
                    position: relative;
                    text-align: center;
                    margin: 0 auto;


                    .styff:hover:after
                    content: "This is currently not available in the App Store";

                    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

                    <div class="sell">
                    <p class="styff"><i class="fab fa-app-store-ios fa-lg"></i></p>
                    </div>





                    .sell 
                    margin: -20px auto;
                    width: 300px;
                    height: 30px;
                    background-color: #FDFEFE;
                    border: 2px solid #FDFEFE;
                    border-radius: 5px;


                    .styff
                    font-size: 20px;
                    padding: 5px;
                    position: relative;
                    text-align: center;
                    margin: 0 auto;


                    .styff:after
                    content: 'Buy now in the App Store';
                    font-size: 20px;
                    padding: 5px;
                    position: relative;
                    text-align: center;
                    margin: 0 auto;


                    .styff:hover:after
                    content: "This is currently not available in the App Store";

                    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

                    <div class="sell">
                    <p class="styff"><i class="fab fa-app-store-ios fa-lg"></i></p>
                    </div>






                    share|improve this answer












                    share|improve this answer



                    share|improve this answer










                    answered Nov 12 at 14:26









                    Smollet777

                    1,3461015




                    1,3461015





















                        0














                        Add additional span to to your HTML, on hover hide that span:






                        .sell 
                        margin: -20px auto;
                        width: 300px;
                        height: 30px;
                        background-color: #FDFEFE;
                        border: 2px solid #FDFEFE;
                        border-radius: 5px;


                        .styff
                        font-size: 20px;
                        padding: 5px;
                        position: relative;
                        text-align: center;
                        margin: 0 auto;


                        .styff:hover .text-to-hide
                        display: none;

                        .styff:hover:after
                        font-size: 20px;
                        padding: 5px;
                        font-family: Font Awesome 5 Free;
                        position: relative;
                        text-align: center;
                        margin: 0 auto;
                        content: "This is currently not available in the App Store f370";


                        .fab
                        color: #29B6F6;

                        <div class="sell">
                        <p class="styff"><span class="text-to-hide">Buy now in the App Store</span>
                        <i class="fab fa-app-store-ios fa-lg"></i></p>
                        </div>








                        share|improve this answer

























                          0














                          Add additional span to to your HTML, on hover hide that span:






                          .sell 
                          margin: -20px auto;
                          width: 300px;
                          height: 30px;
                          background-color: #FDFEFE;
                          border: 2px solid #FDFEFE;
                          border-radius: 5px;


                          .styff
                          font-size: 20px;
                          padding: 5px;
                          position: relative;
                          text-align: center;
                          margin: 0 auto;


                          .styff:hover .text-to-hide
                          display: none;

                          .styff:hover:after
                          font-size: 20px;
                          padding: 5px;
                          font-family: Font Awesome 5 Free;
                          position: relative;
                          text-align: center;
                          margin: 0 auto;
                          content: "This is currently not available in the App Store f370";


                          .fab
                          color: #29B6F6;

                          <div class="sell">
                          <p class="styff"><span class="text-to-hide">Buy now in the App Store</span>
                          <i class="fab fa-app-store-ios fa-lg"></i></p>
                          </div>








                          share|improve this answer























                            0












                            0








                            0






                            Add additional span to to your HTML, on hover hide that span:






                            .sell 
                            margin: -20px auto;
                            width: 300px;
                            height: 30px;
                            background-color: #FDFEFE;
                            border: 2px solid #FDFEFE;
                            border-radius: 5px;


                            .styff
                            font-size: 20px;
                            padding: 5px;
                            position: relative;
                            text-align: center;
                            margin: 0 auto;


                            .styff:hover .text-to-hide
                            display: none;

                            .styff:hover:after
                            font-size: 20px;
                            padding: 5px;
                            font-family: Font Awesome 5 Free;
                            position: relative;
                            text-align: center;
                            margin: 0 auto;
                            content: "This is currently not available in the App Store f370";


                            .fab
                            color: #29B6F6;

                            <div class="sell">
                            <p class="styff"><span class="text-to-hide">Buy now in the App Store</span>
                            <i class="fab fa-app-store-ios fa-lg"></i></p>
                            </div>








                            share|improve this answer












                            Add additional span to to your HTML, on hover hide that span:






                            .sell 
                            margin: -20px auto;
                            width: 300px;
                            height: 30px;
                            background-color: #FDFEFE;
                            border: 2px solid #FDFEFE;
                            border-radius: 5px;


                            .styff
                            font-size: 20px;
                            padding: 5px;
                            position: relative;
                            text-align: center;
                            margin: 0 auto;


                            .styff:hover .text-to-hide
                            display: none;

                            .styff:hover:after
                            font-size: 20px;
                            padding: 5px;
                            font-family: Font Awesome 5 Free;
                            position: relative;
                            text-align: center;
                            margin: 0 auto;
                            content: "This is currently not available in the App Store f370";


                            .fab
                            color: #29B6F6;

                            <div class="sell">
                            <p class="styff"><span class="text-to-hide">Buy now in the App Store</span>
                            <i class="fab fa-app-store-ios fa-lg"></i></p>
                            </div>








                            .sell 
                            margin: -20px auto;
                            width: 300px;
                            height: 30px;
                            background-color: #FDFEFE;
                            border: 2px solid #FDFEFE;
                            border-radius: 5px;


                            .styff
                            font-size: 20px;
                            padding: 5px;
                            position: relative;
                            text-align: center;
                            margin: 0 auto;


                            .styff:hover .text-to-hide
                            display: none;

                            .styff:hover:after
                            font-size: 20px;
                            padding: 5px;
                            font-family: Font Awesome 5 Free;
                            position: relative;
                            text-align: center;
                            margin: 0 auto;
                            content: "This is currently not available in the App Store f370";


                            .fab
                            color: #29B6F6;

                            <div class="sell">
                            <p class="styff"><span class="text-to-hide">Buy now in the App Store</span>
                            <i class="fab fa-app-store-ios fa-lg"></i></p>
                            </div>





                            .sell 
                            margin: -20px auto;
                            width: 300px;
                            height: 30px;
                            background-color: #FDFEFE;
                            border: 2px solid #FDFEFE;
                            border-radius: 5px;


                            .styff
                            font-size: 20px;
                            padding: 5px;
                            position: relative;
                            text-align: center;
                            margin: 0 auto;


                            .styff:hover .text-to-hide
                            display: none;

                            .styff:hover:after
                            font-size: 20px;
                            padding: 5px;
                            font-family: Font Awesome 5 Free;
                            position: relative;
                            text-align: center;
                            margin: 0 auto;
                            content: "This is currently not available in the App Store f370";


                            .fab
                            color: #29B6F6;

                            <div class="sell">
                            <p class="styff"><span class="text-to-hide">Buy now in the App Store</span>
                            <i class="fab fa-app-store-ios fa-lg"></i></p>
                            </div>






                            share|improve this answer












                            share|improve this answer



                            share|improve this answer










                            answered Nov 12 at 14:21









                            Justinas

                            27k33557




                            27k33557





















                                0














                                try adding the following



                                 .styff:hover
                                font-size:0;



                                https://jsfiddle.net/bqgfn56o/






                                share|improve this answer






















                                • It will set font-size 0 to pseudo elements too
                                  – Justinas
                                  Nov 12 at 14:22










                                • Check the fiddle, it does not (since font-size is already set on after) (sry for not including it before)
                                  – Josu Astigarraga
                                  Nov 12 at 14:24
















                                0














                                try adding the following



                                 .styff:hover
                                font-size:0;



                                https://jsfiddle.net/bqgfn56o/






                                share|improve this answer






















                                • It will set font-size 0 to pseudo elements too
                                  – Justinas
                                  Nov 12 at 14:22










                                • Check the fiddle, it does not (since font-size is already set on after) (sry for not including it before)
                                  – Josu Astigarraga
                                  Nov 12 at 14:24














                                0












                                0








                                0






                                try adding the following



                                 .styff:hover
                                font-size:0;



                                https://jsfiddle.net/bqgfn56o/






                                share|improve this answer














                                try adding the following



                                 .styff:hover
                                font-size:0;



                                https://jsfiddle.net/bqgfn56o/







                                share|improve this answer














                                share|improve this answer



                                share|improve this answer








                                edited Nov 12 at 14:22

























                                answered Nov 12 at 14:22









                                Josu Astigarraga

                                544




                                544











                                • It will set font-size 0 to pseudo elements too
                                  – Justinas
                                  Nov 12 at 14:22










                                • Check the fiddle, it does not (since font-size is already set on after) (sry for not including it before)
                                  – Josu Astigarraga
                                  Nov 12 at 14:24

















                                • It will set font-size 0 to pseudo elements too
                                  – Justinas
                                  Nov 12 at 14:22










                                • Check the fiddle, it does not (since font-size is already set on after) (sry for not including it before)
                                  – Josu Astigarraga
                                  Nov 12 at 14:24
















                                It will set font-size 0 to pseudo elements too
                                – Justinas
                                Nov 12 at 14:22




                                It will set font-size 0 to pseudo elements too
                                – Justinas
                                Nov 12 at 14:22












                                Check the fiddle, it does not (since font-size is already set on after) (sry for not including it before)
                                – Josu Astigarraga
                                Nov 12 at 14:24





                                Check the fiddle, it does not (since font-size is already set on after) (sry for not including it before)
                                – Josu Astigarraga
                                Nov 12 at 14:24


















                                draft saved

                                draft discarded
















































                                Thanks for contributing an answer to Stack Overflow!


                                • Please be sure to answer the question. Provide details and share your research!

                                But avoid


                                • Asking for help, clarification, or responding to other answers.

                                • Making statements based on opinion; back them up with references or personal experience.

                                To learn more, see our tips on writing great answers.





                                Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


                                Please pay close attention to the following guidance:


                                • Please be sure to answer the question. Provide details and share your research!

                                But avoid


                                • Asking for help, clarification, or responding to other answers.

                                • Making statements based on opinion; back them up with references or personal experience.

                                To learn more, see our tips on writing great answers.




                                draft saved


                                draft discarded














                                StackExchange.ready(
                                function ()
                                StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53264026%2fhow-do-you-change-content-in-css-when-hovering%23new-answer', 'question_page');

                                );

                                Post as a guest















                                Required, but never shown





















































                                Required, but never shown














                                Required, but never shown












                                Required, but never shown







                                Required, but never shown

































                                Required, but never shown














                                Required, but never shown












                                Required, but never shown







                                Required, but never shown







                                Popular posts from this blog

                                Top Tejano songwriter Luis Silva dead of heart attack at 64

                                政党

                                天津地下鉄3号線