css单div，多效果

我正在尝试在我的div上创建一个漂亮的悬停/点击效果

我在容器（#bgtextbox）中有一个垂直项目列表（#textboxitem），由正方形（#wwa_正方形）分隔。当我的一个项目悬停在上方时，另一个div（图像）出现在我的活动区域框（主照片）中，位于方框后面。单击该项目时，图像不透明度将更改并转换为灰度，同时还会显示一个文本字段

这是所有的CSS和伟大的作品。。。几乎

我的问题是，我不知道如何在其他项目悬停/单击时指定不同的图像和文本。现在只有一个图像和示例文本应用于所有项目。当项目悬停时，图像显示在方框后面，但单击项目时图像显示在前面。我也想有图像和文字保持活跃时，点击

如果有人能帮忙，我们将不胜感激

CSS

#bgtextbox{
    width:320px;
    height:490px;
    background-color:#BCBEC0;
    margin:130px 0 0 0px;
    position:absolute;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    }

#textboxitem{
        width:340px;
        height:40px;
        background-color:#E6E7E8;
        margin:6px 0 0 0px;
        position:relative;
        text-align:center;
        font-family:Arial, Helvetica, sans-serif;
        font-weight:bold;
        line-height:40px;
        border:1px solid #E6E7E8;
        }

#textboxitem:hover{
            border:1px solid #F15A24;
            cursor:pointer;             
            }

#textboxitem:hover ~ #main_photo img{
                            opacity:1;                                      
                            }

#textboxitem:active ~ #main_photo img{  
                        filter: grayscale(100%);
                        -webkit-filter: grayscale(100%);
                        -moz-filter: grayscale(100%);
                        -ms-filter: grayscale(100%);
                        -o-filter: grayscale(100%);
                        opacity:.5;
                        -webkit-transition: opacity 1s ease-in-out;
                      -moz-transition: opacity 1s ease-in-out;
                      -o-transition: opacity 1s ease-in-out;
                      transition: opacity 1s ease-in-out;

            }

#textboxitem:active ~ #main_photo_text{

                    background-color:#000;
                    color:#FFF;


            }


#main_photo{
        width:620px;
        height:490px;
        margin:-480px 0 0 370px;
        text-align:center;

        background-repeat:no-repeat;



        }

#main_photo img{
            opacity:0;
            max-height:100%;
            max-width:100%;
            } 

#main_photo_text{
            width:430px;
            height:150px;
            margin:-150px 0 0 397px;
            position:absolute;
            border-radius: 20px / 20px;
            opacity:.75;
            color:transparent;
            }




#wwa_ysquares{
        width:600px;
        height:600px;
        background-color:#fdb813;
        position:absolute;
        -webkit-transform: rotate(-65deg);
        -moz-transform: rotate(-65deg);
        -ms-transform: rotate(-65deg);
        -o-transform: rotate(-65deg);
        transform: rotate(-65deg);
        margin:100px 0 0 -200px;
        border-radius: 50px / 50px;
        opacity: 0.75;
        }

#wwa_osquares{
        width:600px;
        height:600px;
        background-color:#f15922;
        position:absolute;
        -webkit-transform: rotate(-65deg);
        -moz-transform: rotate(-65deg);
        -ms-transform: rotate(-65deg);
        -o-transform: rotate(-65deg);
        transform: rotate(-65deg);
        margin:380px 0 0 400px;
        border-radius: 50px / 50px;
        opacity: 0.75;
        }

HTML

<div id="bgtextbox">

<div id="wwa_ysquares"></div>

<div id="wwa_osquares"></div>
<div id="textboxitem">PRINT</div>
<div id="textboxitem">PACKAGING</div>
<div id="textboxitem">DISPLAYS</div>
<div id="textboxitem">SPECIALTY PACKAGING</div>
<div id="textboxitem">PACKAGING SUPPLIES</div>
<div id="textboxitem">PROTOTYPES/SAMPLES</div>
<div id="textboxitem">SUPPLIES</div>
<div id="textboxitem">FULLFILMENT/ASSEMBLY</div>
<div id="textboxitem">RSC AND CUSTOM CORRUGATED</div>
<div id="textboxitem">INDUSTRIAL</div>
<div id="main_photo"><img src="images/HYDRATION.jpg"</div></div>
<div id="main_photo_text">TEXT GOES HERE</div>
</div>

印刷品
包装
显示
特种包装
包装用品
原型/样品
补给
全膜/组装
RSC和定制瓦楞纸
工业的
这里有文字

同一ID的项目不能超过1个。您好@user，欢迎使用SO。根据上面的评论，我想重新命名class而不是id，但我不确定这是否是一种令人沮丧的冒犯；）。所以我必须有多个id？@Steve我如何使用类？使用html属性，如-

classs=“textboxitem”

，在CSS中，如-

。textboxitem