javascript - Making text larger in CSS using ":hover" and making it revert to it's smaller (initial st

admin管理员组

文章数量:1289874

Let me explain what I'm trying to achieve.

I have text on my website that I want to make LARGER when the user mouses over and SMALLER when the user leaves the hover.

The problem is when I make it larger like so using the :hover method in CSS I can't revert back to it's previous (initial) state afterwards.

#sname{
    margin-top: 100px;
    margin-bottom: 100px;
    color: rgba(1,1,1,0.7);
}

#sname a{
    font-weight: bold;
    font-size: 4em;
}

#sname a:hover{
    font-size:88px;
    transition: all 500ms;
    font-size-adjust: 20px;

}

I'm kinda stuck, I've tried not:(:hover) but it doesn't do anything, and I've also used :onmouseleave

---

This is a website for a college project, my work is mostly pleted (Had to link it to a DB) but I just want to make it look nicer through CSS, I'd use javascript but have little knowledge of how it works.

Thanks.

Let me explain what I'm trying to achieve.

I have text on my website that I want to make LARGER when the user mouses over and SMALLER when the user leaves the hover.

The problem is when I make it larger like so using the :hover method in CSS I can't revert back to it's previous (initial) state afterwards.

#sname{
    margin-top: 100px;
    margin-bottom: 100px;
    color: rgba(1,1,1,0.7);
}

#sname a{
    font-weight: bold;
    font-size: 4em;
}

#sname a:hover{
    font-size:88px;
    transition: all 500ms;
    font-size-adjust: 20px;

}

I'm kinda stuck, I've tried not:(:hover) but it doesn't do anything, and I've also used :onmouseleave

---

This is a website for a college project, my work is mostly pleted (Had to link it to a DB) but I just want to make it look nicer through CSS, I'd use javascript but have little knowledge of how it works.

Thanks.

• javascript
• html
• css
• hover

Share Improve this question Follow edited Oct 24, 2014 at 8:46 Dominik Hadl 3,61933 gold badges2828 silver badges5858 bronze badges asked Oct 24, 2014 at 8:39 mikus andimikus andi 6511 gold badge11 silver badge99 bronze badges 6

• Can you provide a jsfiddle example? – Bonomi Commented Oct 24, 2014 at 8:41
• 1 Show us your HTML structure, because it should work (jsfiddle/xfgnaw9a/1) – Brett Gregson Commented Oct 24, 2014 at 8:42
• 1 "I have text on my website that I want to make LARGER when the user mouses over and SMALLER when the user leaves the hover." Design- and UX-wise, this is very probably a bad idea. – Tomalak Commented Oct 24, 2014 at 8:46
• You forgot to close some curly brackets in you css rules ... that was the problem ... – henser Commented Oct 24, 2014 at 8:49
• Tomalak, could you elaborate? Interested. – mikus andi Commented Oct 24, 2014 at 8:59

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 7

You just need to add the transition to #sname a (and close the css block):

#sname {
    margin-top: 100px;
    margin-bottom: 100px;
    color: rgba(1,1,1,0.7);
}

#sname a {
    font-weight: bold;
    font-size: 4em;
    transition: all 500ms;
}
    
#sname a:hover {
    font-size:88px;
    font-size-adjust: 20px;
}

<div id="sname">
    <a href="#">test</a>
</div>

Your code works, you just need to move the transition to the initial a state and close the brackets in your css :)

#sname {
  margin-top: 100px;
  margin-bottom: 100px;
  color: rgba(1, 1, 1, 0.7);
}
#sname a {
  font-weight: bold;
  font-size: 4em;
  transition: all 500ms;
}
#sname a:hover {
  font-size: 88px;
  font-size-adjust: 20px;
}

<div id="sname">
  <a href="#">IT WORKS</a>
</div>

本文标签：