Question

嗨，我想在您将鼠标悬停在整个div上时将文本悬停在上方，现在是文本不改变背景变化的颜色，但我希望文本显示。

感谢您的帮助！

.shadow-box .service-box {text-align:center;border:1px solid #f2f2f2;background:#fff;box-shadow:2px 2px 5px 0 #f5f5f5;
background: url(../userfiles/file/driehoek.png) no-repeat right top transparent;}
.service-box {padding-top: 35px; padding-left: 20px;}

.knop {width: 30%; padding-right: 10px; display: inline-table; padding-top: 5px; padding-bottom: 9px; border-radius: 10px; margin-bottom: 10px; padding-left: 14px;}
.afb-knop {width: 30px; height: 5px;}
.knop-txt {position: relative; text-align: left; width: 130px; left: 38px; color: black;}
.knop-txt a:hover {color:white !important;}
div.knop:hover {background-color:#097dbf;}
div.knop a:hover {color:#fff;}
.knop a {color:black;}

<a href="/a">
    <div class="knop">
        <div class="afb-knop">
            <img alt="" src="/userfiles/file/cms.png" />
        </div>
            <div class="knop-txt">
               CMS
           </div>
    </div>
</a>

<a href="/a">
<div class="knop">
<div class="afb-knop"><img alt="" src="/userfiles/file/logo.png" /></div>

<div class="knop-txt">Logo</div>
    </div></a>

<div class="knop">
<div class="afb-knop"><a href="/a"><img alt="" src="/userfiles/file/starterpakket.png" /> </a></div>

<div class="knop-txt"><a href="/a">Starterpakket</a></div>
</div>

Answer 1

只需在您的CSS中添加此样式

  div.knop:hover .knop-txt {
     color: #fff;
   }

Answer 2

在css的最后一行之后移动此行

这已经在您的代码中

login = () => {
  const { email, password } = this.state
  alert(`Email: ${email} Password: ${password}`);
}

//render
<TouchableOpacity onPress={this.login}>

链接的div中的文本，我也想将文本悬停

2 个答案: