悬停在按钮上时的动画答案

【问题标题】：Animation when hovering over a button悬停在按钮上时的动画
【发布时间】：2021-01-20 15:53:11
【问题描述】：

我试图通过添加一个矩形来制作一些动画效果，当按钮（不是矩形，因为它设置为width: 0px;）被用户悬停在按钮上时，该矩形在按钮上展开。不过，我真的不知道该怎么做，所以我被屏蔽了。

所以：

有一个按钮。
某处有一个矩形。
矩形宽度为 0px。
当按钮悬停时，我希望矩形的宽度从 0 增加到 200 像素。不是按钮。

我接受 javascript 解决方案，但只喜欢真正的基本解决方案，因为我是初学者，如果不向我解释，我将无法理解 javascript。

目前，这是我的代码：

HTML：

<div class="flex-container">
   
    <div class="sidebar">

        <button style="margin-top: 100px;" onclick="Accueil()"><div style="z-index: 2;">Accueil</div></button>
            <div class="rectangle" name="acc" style="top: 100px;"></div>

        <button onclick="Thés()"><div style="z-index: 2;">Thés</div></button> 
            <div class="rectangle" name="the" style="top: 100px;"></div>
        
        <button onclick="Tisanes()"><div style="z-index: 2;">Tisanes</div></button>
            <div class="rectangle" name="tis" style="top: 100px;"></div> 

        <button onclick="Théières()"><div style="z-index: 2;">Théières</div></button>
            <div class="rectangle" name="thei" style="top: 100px;"></div>

    </div>

CSS：

    .sidebar > button {
   margin: 20px; /* marge de 30px entre les boutons */
   width: 200px;
   height: 60px;
   max-height: 60px !important;
   max-width: 200px !important; 
   background-color: #F5FAD2;
   text-align: center;
   font-size: 24px;
   border-radius: 7%;
   border: none;
   transition-duration: 0.4s;
   cursor: pointer;
   color: #404040;
   position: relative;
   
}

.rectangle {
   width: 0px;
   height: 60px;
   color: rgba(255, 255, 255, 0.144);
   border-radius: 7%;
   border: none;
   transition: width 1.1s ease 0s;
   transition-timing-function: ease;
   transition-delay: 0s;
   position: absolute;
   z-index: 1;
}

.rectangle button:hover {
   width: 200px;
}

谢谢。

【问题讨论】：

标签： html css animation hover transition

【解决方案1】：

<button> Button </button>


button{
  transition:0.2s;
}

button:hover{
  width:200px
}

【讨论】：

我不想要按钮上的过渡，我想要按钮悬停在名为矩形的元素上的过渡

【解决方案2】：

您可以在按钮 CSS 类中添加转换属性。这将有助于增加矩形的大小。您可以调整刻度内的值以在悬停时获得所需的大小。复制下面的 CSS 和 HTML 代码以使其正常工作。

CSS：

.sidebar>button {
            margin: 20px;
            /* marge de 30px entre les boutons */
            width: 200px;
            height: 60px;
            max-height: 60px !important;
            max-width: 200px !important;
            background-color: #F5FAD2;
            text-align: center;
            font-size: 24px;
            border-radius: 7%;
            border: none;
            transition-duration: 0.4s;
            cursor: pointer;
            color: #404040;
            position: relative;

        }

        .btn:hover {
            width: 300px;
            transform: scale(1.3) perspective(0.4px);
        }

        .rectangle {
            color: rgba(255, 255, 255, 0.144);
            border-radius: 7%;
            border: none;
            position: absolute;
            z-index: 1;
        }

HTML：

<div class="flex-container">

        <div class="sidebar">

            <button style="margin-top: 100px;" class="btn">
                <div style="z-index: 2;">Accueil</div>
            </button>
            <div class="rectangle" name="acc" style="top: 100px;"></div>

            <button class="btn">
                <div style="z-index: 2;">Thés</div>
            </button>
            <div class="rectangle" name="the" style="top: 100px;"></div>

            <button class="btn">
                <div style="z-index: 2;">Tisanes</div>
            </button>
            <div class="rectangle" name="tis" style="top: 100px;"></div>
            <button class="btn">
                <div style="z-index: 2;">Théières</div>
            </button>
            <div class="rectangle" name="thei" style="top: 100px;"></div>

        </div>
    </div>

希望此解决方案对您有所帮助！

【讨论】：

您好，感谢您的回答，尽管将其复制到我的代码中后它什么也没做。矩形是 0px 宽度，我希望它在某个按钮悬停时变为 200px 宽度，我只是不知道我应该使用什么语法让 css 选择器说“当这个按钮悬停时，使该矩形从 0px 增长到200 像素宽度”。
嗨，这应该可以正常工作。尽管如果您愿意，我可以进一步帮助您聊天！你也在按钮标签中添加了“btn”类，对吧？
我从字面上复制粘贴了您的代码，而不是我的。想跳起来聊天看看整个事情吗？那将是非常好的（当然，如果您愿意的话）。您的代码所做的是使按钮变大，但我想要的是按钮影响另一个元素
嗨，我们当然可以在聊天中讨论这个问题。影响另一个元素的按钮是什么意思？
我的意思是，它不会为按钮设置动画。它为按钮中没有的其他东西设置动画。目前我有一个非常不专业/草率的选择！顺便说一句，我会通过聊天与您联系。

【解决方案3】：

也许对你有用

.rectangle-out {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  background: #e1e1e1;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:20px;
  color:#000;
  text-decoration: none; 
}
.rectangle-out:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098D1;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.rectangle-out:hover, .rectangle-out:focus, .rectangle-out:active {
  color: white;
}
.rectangle-out:hover:before, .rectangle-out:focus:before, .rectangle-out:active:before {
  -webkit-transform: scale(1);
  transform: scale(1);
}

&lt;a class="rectangle-out" href="#"&gt;Rectangle Out&lt;/a&gt;

【讨论】：

【解决方案4】：

也许对你有用。

访问我的 GitHub 页面。我的网站总源代码在这里。悬停在按钮上时的许多动画在这里。

https://github.com/jacksonkasi0/mhibuddy

（或）访问我的网站：https://mahibuddy.me

（或）

HTML：

 <div class="lo">
    <ul>
  
  <li>
    <a href="./love/love.html" target="_blank">
      <i class="fa fa-heart"></i>
    </a> 
  </li>
  </ul>
</div>

CSS：

 .lo ul {
margin: 0;
padding: 0;
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);}

.lo > ul > li {
list-style: none;
margin: 0 15px;}

.lo > ul > li > a {
position: relative; 
display: block;
width: 60px;
height: 60px;
text-align: center;
line-height: 63px;
background: #333;
border-radius: 50%;
font-size: 30px;
color: #666;
transition: 0.5s;}

.lo>ul>li>a :hover{
position: relative; 
display: block;
width: 60px;
height: 60px;
text-align: center;
line-height: 63px;
background: rgb(255, 255, 255);
border-radius: 50%;
font-size: 30px;
/* color: #666; */
transition: 0.3s;}

.lo > ul > li > a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: #ff05de;
transition: .5s;
transform: scale(.9);
z-index: -1;}

.lo > ul > li > a:hover::before {
transform: scale(1.1);
box-shadow: 0 0 15px #ff6e9e;}

.lo > ul > li > a:hover {
color: #ff1058;
box-shadow: 0 0 5px #ff1088;
text-shadow: 0 0 5px #ff1044;}

【讨论】：

【解决方案5】：

我想我现在有你要找的东西

.flex-container {
 display: flex;
  flex-direction: row;
  justify-content: center;
}

.rectangle {
  display: none;
}

.button {
   width: 200px;
   height: 60px;
   background-color: #F5FAD2;
   text-align: center;
   font-size: 24px;
   border-radius: 7%;
   border: none;
   transition-duration: 0.4s;
   cursor: pointer;
   color: #404040;
   position: relative;
   margin-right: 20px;
}

.button:hover + .rectangle {
  display: block;
  width: 200px;
}

 <div style="text-align:center" class="flex-container">
 <div class = "button">Accueil</div>
  <div class="rectangle">test</div>
  <div class = "button">Thés</div>
  <div class="rectangle">test</div>
  <div class = "button">Tisanes</div>
  <div class="rectangle">test</div>
  <div class = "button">Théières</div>
  <div class="rectangle">test</div>
 </div>

您可以在此处查看我使用此信息制作的小提琴：https://jsfiddle.net/mbmarketing4you/j92mgsy6/46/

您必须使“矩形”成为按钮的子元素才能使悬停效果起作用。

【讨论】：

您好，感谢您的回答。但是我不明白这是什么.btn-group button:not(:last-child) { border-right: none; /* Prevent double borders */ } 和这个：.btn-group button:not(:last-child) { border-right: none; /* Prevent double borders */ }
*你也说过：变换属性需要在按钮上，而不是在矩形上。问题是我希望矩形增长到 200 像素，而不是按钮
为什么要在矩形而不是按钮上增加宽度？你希望发生什么？代码.btn-group button:not(:last-child) { border-right: none; /* Prevent double borders */ } 防止按钮在按钮右侧有双边框，实际上可以将其删除，因为您的按钮上没有边框。
矩形的位置在哪里？现在，您的矩形位于按钮内。会是这样吗？
@manouna 你想要这样的东西吗？ jsfiddle.net/mbmarketing4you/cm1b6t9L我知道目前它并没有使它更宽，只是在按钮单击时显示不同的内容，但这与您的目标相似吗？