使用 after 选择器类更改悬停按钮的文本颜色答案

【问题标题】：Changing the text color of a button on hover using the after selector class使用 after 选择器类更改悬停按钮的文本颜色
【发布时间】：2018-10-02 05:23:39
【问题描述】：

我正在尝试一些新的按钮悬停效果，但在设置按钮的文本颜色时遇到了一些问题。以下是我的代码：

    .color-1 {
	    text-align: center;
	    background: white;
    }

    .myButton {	
	    cursor: pointer;
	    padding:  25px 80px;
	    margin: 15px 30px;
	    text-transform: uppercase;
	    font-weight:  bold;
	    outline: none;	
     	position: relative;
	    -webkit-transition: all 0.3s;
	    -moz-transition: all 0.3s;
	    transition: all 0.3s; 
	    overflow: hidden;
	    border-radius:  12px;
	    border: 2px solid blue;
	    background:  blue;
	    color: white;
    }

    .myButton::after {
	    background-color: white;
	    content: '';
	    position: absolute;
	    -webkit-transition: all 0.3s;
	    -moz-transition: all 0.3s;
	    transition: all 0.3s;
	    width: 100%;
	    height: 0;
	    /* z-index: -1; */
	    top: 50%;
	    left: 50%;	
	    opacity: 0;
	    -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
	    -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
	    -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
	    transform: translateX(-50%) translateY(-50%) rotate(45deg);		
    }

    .myButton:hover,
    .myButton:active {
        color: black;
    }

    .myButton:hover::after {
	    height: 260%;
	    opacity: 1;
     }

    .myButton:active::after {
	    height: 400%;
	    opacity: 0;
    }

   <div class="color-1">				
	    <button class="btn myButton"><span class="test">Button 2</span></button>				
	</div>

但是，当您将鼠标悬停在按钮上时，文本颜色设置不正确，我相信因为我将 '.myButton:hover::after' 中的不透明度属性设置为 1。我尝试将其设置为 0.75出于测试目的，显然它正在逐渐消失。

谁能帮我把鼠标悬停在按钮上时如何将按钮的文本颜色设置为黑色，而不会消失？

提前致谢，

罗伯特

【问题讨论】：

标签： html css button hover

【解决方案1】：

使用z-index

z-index: -1; 到 .myButton:hover::after 和

    .myButton:hover,
        .myButton:active {
            color: black;
            position: relative;
            z-index: 2;
}

查看代码：

   .color-1 {
	    text-align: center;
	    background: white;
    }

    .myButton {	
	    cursor: pointer;
	    padding:  25px 80px;
	    margin: 15px 30px;
	    text-transform: uppercase;
	    font-weight:  bold;
	    outline: none;	
     	position: relative;
	    -webkit-transition: all 0.3s;
	    -moz-transition: all 0.3s;
	    transition: all 0.3s; 
	    overflow: hidden;
	    border-radius:  12px;
	    border: 2px solid blue;
	    background:  blue;
	    color: white;
    }

    .myButton::after {
	    background-color: white;
	    content: '';
	    position: absolute;
	    -webkit-transition: all 0.3s;
	    -moz-transition: all 0.3s;
	    transition: all 0.3s;
	    width: 100%;
	    height: 0;
	    /* z-index: -1; */
	    top: 50%;
	    left: 50%;	
	    opacity: 0;
	    -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
	    -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
	    -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
	    transform: translateX(-50%) translateY(-50%) rotate(45deg);		
    }

    .myButton:hover,
    .myButton:active {
        color: black;
            position: relative;
    z-index: 2;
    }

    .myButton:hover::after {
	    height: 260%;
	    opacity: 1;
      z-index: -1;
     }

    .myButton:active::after {
	    height: 400%;
	    opacity: 0;
    }

   <div class="color-1">				
	    <button class="btn myButton"><span class="test">Button 2</span></button>				
	</div>

【讨论】：