Change Text On Hover with CSS, Also Style That Text

Question

Been stuck on this for ages, tried going to every link on first page of Google after searching "css change text on hover", no luck though.

I have text in the middle of a div, that text has it's own div which is styling the text and deciding the text position.

However I want the text to change when you hover over the div it is in and with CSS.

I've read guides of content/:before/:after but it made it much more confusing.

Here's the current code that does its current job fine:

/* Circles in the services section*/
.servicecircle { 
width: 204px; 
height: 204px;
background-image: url('/anonymous/for/reasons.png');
display: inline-block;
background-repeat: no-repeat;
margin-left: 22px;
margin-right: 22px;
/* Button transition*/
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}

.servicecircle:hover{
background-image: url('/anonymous/for/reasons.png');
cursor: pointer;
}

I DID manage to get the text changing with the below code, however the divs were no longer aligned properly and I looked everywhere but found no way of styling the text within content.

/* Circles in the services section*/
.servicecircle:after { 
width: 204px; 
height: 204px;
background-image: url('/anonymous/for/reasons.png');
display: inline-block;
background-repeat: no-repeat;
margin-left: 22px;
margin-right: 22px;
/* Button transition*/
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
/* Content is inserted */
content: 'Service 1';
}

/* Changes content on hover */
.servicecircle:hover:after{
background-image: url('/anonymous/for/reasons.png');
cursor: pointer;
content: 'Service Description..';
}

This entire thing is inserted into the page with

<div class="servicecircle">                                 
 </div>

Is what I'm after even possible CSS?

P.S If possible a link to a good guide would be great, I'm still fairly new to CSS so this might be a bit out of my league. All guides I've read use code I've never even seen before

Possible duplicate of [How can I replace text with CSS?](http://stackoverflow.com/questions/7896402/how-can-i-replace-text-with-css) — Germano Plebani, Oct 18 '16 at 16:16
@GermanoPlebani Thanks man that works. However I want to learn how to do it myself, I'm struggling to see why I need CSS divs in twice, both with and without :after — Ben, Oct 19 '16 at 09:19
The second is only for the style and content of pseudo element. For example: https://jsfiddle.net/89j1xne2/1/ — Germano Plebani, Oct 19 '16 at 10:00

score 0 · Answer 1 · answered Oct 18 '16 at 16:07

You can do this using CSS.

<html>
<head>
<style type="text/css">
    div#line1 span#a {
        display:inline;
    }
    div#line1:hover span#a {
        display:none;
    }
    div#line1 span#b {
        display:none;
    }
    div#line1:hover span#b {
        display:inline;
    }
</style>

</head>
<body>
<div id="line1">
    <table border="1">
        <tr>  
            <td>
                <span id="a">this is sick</span><span id="b">this is awesome</span>
            </td>
        </tr>
    </table>
</div>
</body>
</html>

<div id="line1">
    <table border="1">
        <tr>  
            <td><span id="a">this is sick</span><span id="b">this is awesome</span></td>
        </tr>
    </table>
</div>

MMJ · Answer 2 · 2016-10-19T18:18:50.193

0

You can style anything you want under your .servicecircle:hover:after Just like this:

.servicecircle:hover:after{
background-image: url('/anonymous/for/reasons.png');
cursor: pointer;
content: 'Service Description..';
color:red; // Your own style #1
font-family: cursive; // #2
border: 1px solid black; // #3
width:100%; // #4
height: 30px; // #5
}

This guide will help you.

To center your text, Update this

.servicecircle:after { 
width: 204px; 
height: 204px;
background-image: url('/anonymous/for/reasons.png');
display: inline-block;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-content: center;
/* Button transition*/
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
/* Content is inserted */
content: 'Service 1';
}

Follow this Centering Guide

edited Oct 19 '16 at 18:18

answered Oct 18 '16 at 16:13

MMJ

279
7
23

I need the text to be aligned in the center of the div though, if I put some margins in there it'd go for the whole div rather than the text :L – Ben Oct 19 '16 at 09:05
@Ben First, remove the `margin-left` and `margin-right` from your `.servicecircle:after` Then, Add `display: flex;` `justify-content: center;` `align-content: center;` and the text will be centered. Follow this [Centering Guide](https://css-tricks.com/centering-css-complete-guide/) . I've updated the answer. – MMJ Oct 19 '16 at 18:17

Change Text On Hover with CSS, Also Style That Text

2 Answers2