• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

Hover issues changing an icon to text

Question

hbjr7    1

I'm having coding issues with creating a hover effect for icons. I want to change the icon into specific text when hovered over, but I'm not getting any results.

 

HTML:

 

<!--Interactive Squares-->
            
    <div class="small-boxes">
        <p class="tips-icons"><i class="icon-sun-o"></i></p>
    </div>
            
    <div class="small-boxes"><p class="tips-icons"><i class="icon-umbrella-weather"></i></p></div>
    <div class="small-boxes"><p class="tips-icons"><i class="icon-squirrel"></i></p></div>
    <div class="small-boxes"><p class="tips-icons"><i class="icon-cloud"></i></p></div>
    
            
            
   <!--Hover Action-->
      <p class=text1>Gardening for Sunshine</p>  
      <p class=text2>Gardening for Rain</p>
      <p class=text3>Avoid the Squirrels</p>
      <p class=text4>Gardening for Shade</p>
            
    <!-- End of Hover Action-->

 

 

 

CSS:

.clear {
    clear: both;
}
.last {
    margin-right: 0;
    
    
}
.tips-icons {
    color: green;
    font-size: 85px;
    letter-spacing: 30px;
    margin: 30px 20px 20px 60px;
   
}
/* Hover Action */
.tips-icons: hover .text1 { 
    opacity: 0.6; 
    text-align: justify; 
    color: green; 
    font-size: 20px; 
    font-weight: 700; 
    font-family:'Roboto', sans-serif; 
    padding:30px; 
}
.text1 { 
    width: 200px; 
    height: 150px; 
    background: #FFF;
    color: green;
    opacity: 0; 
} 
.text2 { 
    width: 340px; 
    height: 217px; 
    background: #FFF; 
    color: green;
    opacity: 0; 
} 
.text3 { 
    width: 200px; 
    height: 150px; 
    background: #FFF;
    color: green;
    opacity: 0; 
} 
.text4 { 
    width: 200px; 
    height: 150px; 
    background: #FFF; 
    color: green;
    opacity: 0; 
} 

/* ---End of Hover Action--- */
.small-boxes {
    border-radius: 25px;
    background: white;
    padding: 20px; 
    width: 200px;
    height: 150px;
    float: left;
    margin: 40px 40px 30px 80px;
    box-shadow: 10px 10px 5px #bfbfbf;
    border: solid 8px #99ff99;
    
}

            

Edited by Mur
Wrapping code in formatted tags

Share this post


Link to post
Share on other sites

2 answers to this question

Recommended Posts

  • 0
game_over    802

Hi,

 

You might want to do a little bit of reading how CSS works.

 

.tips-icons: hover .text1

 

This selector won't do anything for two reasons:

 

You have a space between : and hover .. CSS now thinks 'hover' is it's own selector... well it would if it wasn't incorrect syntax.

 

It should be .tips-icons:hover

 

Also, you have written it in a way that .text1 must be a child of .tips-icons like so:

 

<p class="tips-icons">

  <p class=text1>Gardening for Sunshine</p>  

</p>

 

The next problem you have is, CSS is not directly able to replace the content of 1 div with another div, unless you overlay them together and hide one as you show the other on hover... not ideal. Another method with CSS is to use the content: "something..." css property... but the content will be in CSS and not HTML, so it may not be viable depending on use case.

 

So, lets go with what you already have. Moved your text1/2/3/4 divs inside your boxes and we'll hide one, and show the other on hover.

 

You are also repeating the same code over and over, you don't need to repeat CSS for the same selector (text1, text2, text3, text4) you could just call them text.

 

Also, they aren't paragraphs, so no need to use P.

 

    <div class="small-boxes">
        <i class="fa fa-close"></i>
        <span>Gardening for Sunshine</span>  
    </div>
            
    <div class="small-boxes">
        <i class="fa fa-close"></i>
        <span>Gardening for Rain</span>
    </div>
    
    <div class="small-boxes">
        <i class="fa fa-close"></i>
        <span>Avoid the Squirrels</span>
    </div>
    
    <div class="small-boxes">
        <i class="fa fa-close"></i>
        <span>Gardening for Shade</span>
    </div>

 

i {
    color: green;
    font-size: 85px !important;
    padding-top: 25px;
}

.small-boxes {
    border-radius: 25px;
    background: white;
    width: 200px;
    height: 150px;
    line-height: 150px;
    text-align: center;
    float: left;
    margin: 40px 40px 30px 80px;
    box-shadow: 10px 10px 5px #bfbfbf;
    border: 8px solid #99ff99;
}

span {
    color: green;
    display: none;
}

.small-boxes:hover i {
  display: none;
}

.small-boxes:hover span {
  display: inline;
}

 

Here is an example of the above code in action: https://jsfiddle.net/LjaL19uf/

 

The only thing you need to do is change your icons back.

Share this post


Link to post
Share on other sites
  • 0
hbjr7    1

Thank you! Worked great.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.