Question 269129 in Html Question posted in
Some basic documentation can be found here.

Html – How to change link sizes individually while hovering?

I want my links to zoom out a bit whenever I hover over it, However I have no idea how I can separate the links to do hover individually.

body{
  background: gray;
}

.link a {
  font-size: 25px;
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.41);
  border-style: solid;
  border-width: 1px;
  padding: 3px;
  border-radius: 10px;
  text-decoration: none;
}

.link a:hover {
  color: #000000;
}
<div class='link' style="text-align:center" style="text-decoration:none">

  <a id='left' href="how.html">How to Avoid Fighting</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

  <a id='center' href="why.html">Why You Should Not Fight</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

  <a id='right' href="Ways.html">Ways to Fight</a>
</div>

This is what I have but I can’t figure out how to stop the links from hovering together.

Tags:

2

Answers


  1. 0

    It’s not clear to me what you want to do, if you want to change the font size on mouse hover you can do it in your .link a:hover rule

    .link a{
  font-size: 25px;
  color:#000fff;
  background-color: rgba(255, 255, 255, 0.41);
  border-style: solid;
  border-width: 1px;
  padding: 3px;
  border-radius: 10px;
  text-decoration: none;
  
  
}

.link a:hover{
  color: #000000;
  font-size:20px;
  
}
    <div class='link' style="text-align:center"  style="text-decoration:none" >     

      <a id='left' href="how.html">How to Avoid Fighting</a>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    
      
      <a id='center' href="why.html">Why You Should Not Fight</a>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;     

      <a id='right' href="Ways.html">Ways to Fight</a>
    </div>
    Login or Signup to reply.
  2. 0

    If you mean to scale the elements when on hover, you could use transform: scale(1.2); so that the link will get bigger.

    It’s important to note that the browser default for the display css property of an <a> element is display: inline and as such it wouldn’t have a size at all and the scaling wouldn’t work.

    So to make it work you need to change it as display: inline-block

    body{
  background: gray;
}

.link a {
  font-size: 25px;
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.41);
  border-style: solid;
  border-width: 1px;
  padding: 3px;
  border-radius: 10px;
  text-decoration: none;
  text-align: center;
  
  /*so that the element has an actual size (to scale)*/
  display: inline-block;
  /*it will just smoothen the transition over time when it kicks in*/
  transition: transform 0.3s;
}

.link a:hover {
  color: #000000;

  /*scale the element size a factor x1.2*/
  transform: scale(1.2);
}
    <div class='link'>
  <a id='left' href="how.html">How to Avoid Fighting</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

  <a id='center' href="why.html">Why You Should Not Fight</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

  <a id='right' href="Ways.html">Ways to Fight</a>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search