CODEWITHSUNDEEP
htmlcss
Herro2689
Herro2689

Reputation: 81

My normal text moves when I use the hover property in CSS

I'm creating a sort draft 'Contact Us' page and I thought I'd play around with the hover property in CSS. See my code below.

.hoverinfo {
  position: static;
  color: #000000;
  cursor: pointer;
}
.hoverinfo p {
  display: none;
  color: #000000;
  border: 4px;
}
.hoverinfo:hover p {
  background-color: #C4C4C4;
  margin: 20px;
  border: 1px solid black;
  display: inline-block;
}
<p>Test</p>
<div id="contact" class="info">
  <ul>
    <li>
      <div id="phone" class="hoverinfo">Telephone
        <p>Number</p>
      </div>
    </li>
    <li>
      <div id="twitter" class="hoverinfo">Twitter
        <p>Twitter URL</p>
      </div>
    </li>
  </ul>
</div>

My issue at the moment is when I hover over 'Telephone' or 'Twitter', the actual text itself moves. I had a look around and people are usually saying it's because of padding, but I don't have any! This only started because I wanted to move the actual text that pops up farther to the right hand side because it was way too close to the other text when it popped up.

Upvotes: 2

Views: 2339

Answers (2)

dheeraj Kumar
dheeraj Kumar

Reputation: 372

You need to just add position absolute to p Tag on hover.

.hoverinfo {
  position: static;
  color: #000000;
  cursor: pointer;
}
.hoverinfo p {
  display: none;
  color: #000000;
  border: 4px;
}
.hoverinfo:hover p {
  background-color: #C4C4C4;
  border: 1px solid black;
  display: inline-block;
  position: absolute;
  margin-top: 0px;
}
<p>Test</p>
<div id="contact" class="info">
  <ul>
    <li>
      <div id="phone" class="hoverinfo">Telephone
        <p>Number</p>
      </div>
    </li>
    <li>
      <div id="twitter" class="hoverinfo">Twitter
        <p>Twitter URL</p>
      </div>
    </li>
  </ul>
</div>

Upvotes: 1

Sebastian Brosch
Sebastian Brosch

Reputation: 43604

You can use the following solution using display:inline; on the visible / hovered <p> item:

.hoverinfo {
  position: static;
  color: #000000;
  cursor: pointer;
}
.hoverinfo p {
  display: none;
  color: #000000;
}
.hoverinfo:hover p { 
  background-color: #C4C4C4;
  border: 1px solid black;
  margin:20px;
  display: inline;
}
<p>Test</p>
<div id="contact" class="info">
  <ul>
    <li>
      <div id="phone" class="hoverinfo">Telephone
        <p>Number</p>
      </div>
    </li>
    <li>
      <div id="twitter" class="hoverinfo">Twitter
        <p>Twitter URL</p>
      </div>
    </li>
  </ul>
</div>

Upvotes: 3

Related Questions