Блог

Главная - Вопросы по программированию - Развернуть боковую панель при наведении курсора мыши с текстом

Развернуть боковую панель при наведении курсора мыши с текстом

#html #css

#HTML #css

Вопрос:

Я нашел код боковой панели, который я сейчас использую:

 #sidebar {
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  height: 100%;
  width: 60px;
  background: #fff;
  border-right: 1px solid #ddd;
  text-align: center;
}

#sidebar a {
  text-decoration: none;
  display: block;
  padding: 20px 0 20px 0px;
  color: #000000;
  letter-spacing: 1px;
}

#sidebar a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: black !important;
}

#sidebar a:hover,
#sidebar a.active {
  text-decoration: none;
  background: #4caf50;
  color: black;
}

#sidebar a.active {
  background: #00ff00;
}  
 <div id="sidebar">
  <center>
  <img width="80%" height="10%" src="https://img.pngio.com/download-for-free-10-png-gold-star-png-icon-top-images-at-carlisle-small-gold-star-icon-png-512_512.png"/>
  </center><br>
  <a href="one.php">1️⃣</a>
  <a href="two.php">2️⃣</a>
  <a href="three.php">3️⃣</a>
</div>

Я хочу добавить текст на боковую панель следующим образом:

 <div id="sidebar"><br>
    <center>
    <img width="80%" height="10%" src="https://img.pngio.com/download-for-free-10-png-gold-star-png-icon-top-images-at-carlisle-small-gold-star-icon-png-512_512.png"/>
    </center><br>
    <a href="one.php">1️⃣ Number one</a>
    <a href="two.php">2️⃣< Number two/a>
    <a href="three.php">3️⃣ Number three</a>
</div>
  • Но я хочу, чтобы текст отображался только при наведении курсора мыши на боковую панель. Итак, не зависая, это небольшая боковая панель только с символами, а при наведении курсора она увеличивается и отображает текст. Как я могу это сделать?

Ответ №1:

Вам нужно будет сделать пару вещей, чтобы заставить это работать:

  1. Оберните текст в элемент, на который можно настроить таргетинг hover
  2. Переместите ширину от #sidebar к фактическому a элементу

 @keyframes over {
  0% {
    opacity: 0;
    margin-left: -99em;
  }
  50% {
    opacity: 0;
    margin-left: 15px;
  }
  100% {
    opacity: 1;
    margin-left: 15px;
  }
}

#sidebar {
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  height: 100%;
  background: #fff;
  border-right: 1px solid #ddd;
}

#sidebar img {
  width: 40px;
  height: auto;
  display: block;
  margin-left: 3px;
  /* margin: 0 auto;  <-- centers on hover too */
}

#sidebar #nav-items {
  width: 100%;
}

#sidebar #nav-items a {
  color: black;
  display: flex;
  padding: 20px;
  text-decoration: none;
}

#sidebar #nav-items a span {
  display: inline-block;
  margin-left: -999rem;
}

#sidebar #nav-items:hover a span {
  text-decoration: none;
  font-size: inherit;
  animation-name: over;
  animation-duration: .5s;
  animation-fill-mode: forwards;
}

#sidebar #nav-items a:active,
#sidebar #nav-items a:hover {
  text-decoration: none;
  background: #4caf50;
  color: black;
}

#sidebar #nav-items a:active {
  background: #00ff00;
}  
 <div id="sidebar">
  <img src="https://img.pngio.com/download-for-free-10-png-gold-star-png-icon-top-images-at-carlisle-small-gold-star-icon-png-512_512.png" />
  <div id="nav-items">
    <a href="one.php">1️⃣ <span>Some text here longer and this is here</span></a>
    <a href="two.php">2️⃣ <span>Some text here</span></a>
    <a href="three.php">3️⃣ <span>Some text here</span></a>
  </div>
</div>

Комментарии:

1. При добавлении изображения в верхнюю часть боковой панели: <img width="80%" height="10%" class="imgShake" src="img/pebble.png"/> боковая панель занимает 50% экрана, а изображение становится огромным. Почему это?

2. Потому что добавление position: fixed выводит #sidebar из потока документов и относится к телу (за некоторыми исключениями), а не к его контейнеру. Итак, когда вы добавили изображение, ширина боковой панели равна 80% от собственного размера вашего изображения. В этой конкретной ситуации вам лучше придать изображению фиксированный размер и height: auto в вашем CSS. Но вам нужно будет предоставить больше HTML / CSS для вашего конкретного случая.

3. Теперь обновленный вопрос 🙂

4. Я обновил свой ответ. Кроме того, не используйте <center> теги. Они давно устарели.

5. Потрясающе, спасибо! Но как я могу центрировать ее без использования <center> тегов? Я всегда ими пользовался.

Ответ №2:

решение:

 #sidebar {
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  height: 100%;
  width: 60px;
  background: #fff;
  border-right: 1px solid #ddd;
  transition: all .3s ease-in-out;
  overflow: hidden;
}
#sidebar:hover {
  width: 160px;
}
#sidebar a {
  text-decoration: none;
  display: block;
  padding: 20px 20px;
  color: #000000;
  letter-spacing: 1px;
  font-size: 14px;
  font-weight: bold;
  font-family: Arial;
  width: 30px;
  white-space: nowrap;
  transition: all .2s ease-in-out;
}
#sidebar a span {
  opacity: 0;
  transition: all .2s ease-in-out;
}
#sidebar:hover a span {
  opacity: 0.2
}
#sidebar a:hover span {
  opacity: 1;
}
#sidebar a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: black !important;
  width: 150px;
}

#sidebar a:hover,
#sidebar a.active {
  text-decoration: none;
  background: #4caf50;
  color: black;
}

#sidebar a.active {
  background: #00ff00;
}  
 <div id="sidebar">
    <a href="one.php">1️⃣ <span>Number one</span></a>
    <a href="two.php">2️⃣ <span>Number two</span></a>
    <a href="three.php">3️⃣ <span>Number three</span></a>
</div>

Комментарии:

1. Этот ответ хорош, если весь текст имеет одинаковую ширину, что является большим предположением. Вы не можете гарантировать, что это width: 150px; будет точным.

2. @Em an, что насчет изображения? И текст имеет разную ширину, поэтому width: 150px; не будет точным, как сказал @disinfor.