悬停不适用于其他 div 元素

Question

这是该按钮上的所有样式，我想让单击和应用隐藏，当鼠标悬停时，文本仅在悬停时出现，而在鼠标移开时消失

HTML 代码

  <section class="call-to-action">         
    <h1>Enroll for various online courses<br>Anywhere from the world</h1>
    <div class="click">Click</div> <div class="apply"> to Apply </div> 
    <a href="#">Call to Action</a>  
  </section>

CSS代码

.call-to-action a
{
color: white;                              
text-decoration: none;                          
font-weight: bolder;                   
letter-spacing: 2px;                        
display: inline-block;                               
background: transparent;                               
padding: 20px 14px;                               
border: .9px solid beige;                               
cursor: pointer;                               
transition: 0.7s;                                
 }
                           
.call-to-action a:hover
{
color: white;                               
text-decoration: none;                               
font-weight: bolder;                               
display: inline-block;                               
background: rgb(221, 64, 53);                               
padding: 20px 14px;                               
border: 1px solid beige;                               
cursor: pointer;                               
transition: 0.7s ;                               
transform:scale(1.2,1.2);                               
}
                           
.call-to-action .click
{
opacity: 0;                               
color: black;                               
font-size:20px ;                                                               
}
                           
.call-to-action .apply 
 {
  opacity: 0;                               
  color: black;                               
 font-size:20px ;                               
 }
                                                                                         
 .call-to-action a:hover > .click                               
 {                                                              
color: white;                               
position: absolute;                               
transform: translate(-40%,-40%);                               
font-size: 300px;                               
transition: 0.4s;                               
opacity: 1;                                  
 } 

在这种情况下谁能帮助我

Answer 1

签出这个方法：

这里发生了什么？

默认情况下，点击和应用文本的不透明度为 0。因此它对用户不可见。当您将鼠标悬停在文本上时，我们将不透明度更改为 100%，持续时间为 0.3 秒。因此，文本将被一个小的淡入动画使用可见。

检查下面的 CSS 代码

.call-to-action .click,
.call-to-action .apply{
  transition: all 0.3s ease;
  opacity: 0;
  color: #000;
  /* other syles you need */
}
.call-to-action .click:hover,
.call-to-action .apply:hover{
  opacity: 1;
}

Answer 2

.call-to-action a
{
color: white;                              
text-decoration: none;                          
font-weight: bolder;                   
letter-spacing: 2px;                        
display: inline-block;                               
background: transparent;                               
padding: 20px 14px;                               
border: .9px solid beige;                               
cursor: pointer;                               
transition: 0.7s;                                
 }
                           
.call-to-action a:hover
{
color: white;                               
text-decoration: none;                               
font-weight: bolder;                               
display: inline-block;                               
background: rgb(221, 64, 53);                               
padding: 20px 14px;                               
border: 1px solid beige;                               
cursor: pointer;                               
transition: 0.7s ;                               
transform:scale(1.2,1.2);                               
}
                           
.call-to-action .click
{
opacity: 0;                               
color: black;                               
font-size:20px ;                                                               
}
                           
.call-to-action .apply 
 {
  opacity: 0;                               
  color: black;                               
 font-size:20px ;                               
 }
                                                                                         
 .call-to-action a:hover > .click                               
 {                                                              
color: white;                               
position: absolute;                               
transform: translate(-40%,-40%);                               
font-size: 300px;                               
transition: 0.4s;                               
opacity: 1;                                  
 }
 
.call-to-action .click, .call-to-action .apply{
  transition: all 0.5s ease;
  opacity: 0;
  color: #000000;
}
.call-to-action .click:hover, .call-to-action .apply:hover{
  opacity: 1;
}

<section class="call-to-action">         
    <h1>Enroll for various online courses<br>Anywhere from the world</h1>
    <div class="click">Click</div> <div class="apply"> to Apply </div> 
    <a href="#">Call to Action</a>  
  </section>

Answer 3

CSS 规则从上到下，从父级到子级应用。

您不能向上或向后进行 CSS 选择以将属性应用于父元素或更早的兄弟元素。

但是您可以将这两个元素包装在一个容器元素中以应用您的样式。

.button-tooltip-container .tooltip {
    opacity: 0;                                                              
}
.button-tooltip-container:hover .tooltip {
    opacity: 1;                                                              
}

<div class="button-tooltip-container">
    <div class="tooltip">Button tooltip text</div>
    <button>Call to Action</button>
</div>

您应该阅读本文以开始使用 CSS 选择器https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors