小编Dav*_*vid的帖子

我正在使用Notepad ++,我刚开始学习React js和JSX语法扩展,但没有样式使其难以阅读.我不确定我是否可以在Notepad ++中实现样式,或者甚至可以导入JSX预处理器或插件.我正在考虑安装Babel,但我还必须安装NPM和Node js等.而且我不确定这是否是最好的方法.或者我应该使用不同的IDE？

我试图让我的h2文字"悬停"在我的图像之上,但我不确定我做错了什么.chrome中的开发人员工具说显示:relative是无效的属性值,我不知道为什么.我将h2文本设置为绝对值,并将顶部/左侧设置为0px,但文本仍位于图像下方.请帮忙.

HTML

<div class="cta-wrapper">
    <div class="cta">
        <img src="Photos/mypedal.png">
        <a href="Products/productroom.php"><h2>Product Room</h2></a>
    </div>
    <div class="cta">
        <img src="Photos/signup.png">
        <a href="Users/createaccount.php"><h2>Sign Up</h2></a>
    </div>
    <div class="cta">
        <img src="Photos/features.png">
        <a href=""><h2>Features</h2></a>
    </div>
</div>

CSS

.cta-wrapper {
    width: 960px;
    margin: 0 auto;
    margin-top: 80px;
}

.cta {
    display: relative;
    float: left;
    width: 200px;
    height: 200px;
    margin: 0px 60px;
}

.cta a {
    display: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.cta h2 {
    display: absolute;
    text-decoration: none;
    color: #BBBBBB;
}

.cta img {
    top: 0px; …