Почему мое преобразование CSS не работает?

#html #css

#HTML #css

Вопрос:

Я хочу, чтобы при наведении курсора мыши на мои логотипы появлялась классная «тень», но это не работает. Я добавил некоторый тип границы, чтобы при наведении курсора на нее она появлялась, но только по краям, я использовал z-index: -1; , чтобы мои логотипы появлялись вместо границы, а затем с преобразованием, когда я наведу курсор на логотипы, граница отодвинется в сторону, но это не работает.

HTML

 <footer>
    <ul class = "bottom">
        <li><a href = "https://www.facebook.com" target="_blank"><i class = "fa fa-facebook"></i></a> 
        </li>
        <li><a href = "#" target="_blank"><i class = "fa fa-twitter"></i></a></li>
        <li><a href = "#" target="_blank"><i class = "fa fa-youtube"></i></a></li>
        <li><a href = "#" target="_blank"><i class = "fa fa-instagram"></i></a></li>
    </ul>
</footer>

CSS

 footer{
   width: 100%;
   display: block;
   padding: 50px 0;
   background-color: #262626;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
}

.bottom{
   list-style: none;
   display: flex;
}

.bottom li{
   position: relative;
   display: block;
   font-size: 30px;
   height: 60px;
   width: 60px;
   border-radius: 50%;
   background: black;
   line-height: 60px;
   margin: 0 15px;
   cursor: pointer;
}

.bottom li a{
   color: #666;
}

.bottom li:before{
   position: absolute;
   content: '';
   top: 0;
   left: 0;
   background: #d35400;
   height: 100%;
   width: 100%;
   border-radius: 50%;
   z-index: -1;
   transition: .5s;
   transform: scale(0.9);
}

.bottom li a:hover:before{
   transform: scale(1.2);
   box-shadow: 0 0 15px #d35400;
}

Ответ №1:

Трудно точно понять, каким вы хотите видеть свой конечный результат, это близко?

 * {
  box-sizing: border-box;
}

footer {
  width: 100%;
  display: block;
  padding: 50px 0;
  background-color: #262626;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.bottom {
  list-style: none;
  display: flex;
}

.bottom li {
  position: relative;
  display: flex;
  font-size: 30px;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  background: black;
  line-height: 60px;
  margin: 0 15px;
  transition: all 0.2s ease;
  cursor: pointer;
  justify-content: center;
  align-items: center;
}

.bottom li a {
  color: #666;
  display: flex;
  text-decoration: none;
}

.bottom li:hover {
  transform: scale(1.2);
  box-shadow: 0 0 15px #d35400;
  border: 2px solid #d35400;
}

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<footer>
  <ul class="bottom">
    <li><a href="https://www.facebook.com" target="_blank"><i class = "fa fa-facebook"></i></a>
    </li>
    <li><a href="#" target="_blank"><i class = "fa fa-twitter"></i></a></li>
    <li><a href="#" target="_blank"><i class = "fa fa-youtube"></i></a></li>
    <li><a href="#" target="_blank"><i class = "fa fa-instagram"></i></a></li>
  </ul>
</footer>

Ответ №2:

Ваш стиль включен, .bottom li::before { таким .bottom li образом, это то, что вы хотите активировать при наведении курсора мыши.

 .bottom li:hover{
 transform: scale(1.2);
 box-shadow: 0 0 15px #d35400;
}

https://jsfiddle.net/42w7hgo6/3/

Обратите внимание, что у вас есть два display в .footer и before для CSS3 имеет два двоеточия: ::before

1. Это близко, но не то, что я хочу. Цвет, который я получаю внутри границы, я хочу, чтобы он был снаружи, а не просто в тени окна. А затем внутри я постараюсь, чтобы логотип (f, youtube, Twitter) также осветлялся при наведении курсора мыши.

2. Я обновил ссылку. Не уверен, что понимаю, поэтому я удалил оранжевый цвет внутри поля. Тогда вы хотите осветлить логотип? Я добавил белый цвет к логотипу.

Ответ №3:

При этом используется окно-тень при наведении. Таким образом, поле будет выделяться при наведении курсора мыши на поле.

CSS

 .bottom {
  transition: box-shadow .3s;
  width: 300px;
  height: 500px;
  margin: 50px;
  border-radius:10px;
  border: 1px solid #ccc;
  background: #fff;
  float: left;
}

.bottom:hover {
  box-shadow: 0 0 11px rgba(33,33,33,.2); 
}

Пример:
https://codepen.io/ovdojoey/pen/BomKyZ

1. при публикации кода, пожалуйста, используйте фрагмент кода, когда это возможно. это намного чище на вид, и вы даже можете запустить код на этом веб-сайте вместо копирования в любую используемую вами программу и запускать его там.

2. Хорошо, отмечено. Я впервые отвечаю в StackOverflow