Css 隐藏一个图像并悬停显示另一个图像

我有两张图片，一张放在另一张上面，我想做的是根据悬停在父对象上改变不透明度

这意味着默认情况下，hovethumb的不透明度设置为0。但当我将鼠标悬停在索引上时，hoverthumb的不透明度应更改为1，bdata的不透明度应更改为0.5

但是样式不起作用。。。我使用的样式是div.productindex:hover>div.hoverthumb&div.productindex:hover>div.bdata

有人能帮我找到正确的目标吗

我的php代码：

<div class="index ">

    <div class="bdata">                     

                    <div class="thumb"><?php the_post_thumbnail('')?></div>
    </div>  
    <div class="hoverthumb clearfix"><img src="<?php echo get_template_directory_uri(); ?>/images/buy.png" width="50px" ;></div>         

</div>

---

div.index:hover:after这是一个错误吗？里面不允许有子元素：after/：before pseudoelementsyes…正在对代码进行故障排除…该部分被落在后面您还有一个clearfix；已定义：请验证您的css，以便确保避免解析错误更改为清除：两者

.index{
    float: left;
    height: auto;
    padding-bottom:10px;    
    margin-bottom:20px;
    }
.hoverthumb{
position:absolute;
opacity:0;
clear:both;
}
div.index:hover > div.bdata{
opacity:0.5;
 border: thin outset #EC008C;  
}

div.index:hover > div.hoverthumb{
opacity:1;
}

.thumb{
width:100%;
}

.thumb img{
    width:100%;
    height: auto;
}