要突出显示鼠标悬停在相应项目上的图像。

Question

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="troll.css">
    </head>
    <body>

        <div id="bad">
            <!--change start here-->
            <p>
                <img src="image1.jpg"  id="boa">
                <span class="bob">Flatkit</span>
            </p>
                <!--button2-->        
                <img src="right.jpg"  onclick="buttonSec()" id="buttnsec">
                <p class="boc" >Main</p>

            <!--change ends here-->
            <ul class="parent" onclick="mangoGrape()"><img src="img.jpg">Dashboard</ul>

            <ul class="parent" onclick="mangoGrape(this)"><img src="img1.jpg">Apps
                <div id="pappaya">
                <li class="apple"> <a href="#">Inbox</a></li>
                 <li class="apple"><a href="#">Condact</a></li>
                 <li class="apple"><a href="#">Calendar</a></li>
                </div>
            </ul>
             <ul class="parent" onclick="mangoGrape(this)"><img src="img2.jpg">Layout
                <div id="pappayas">
                 <li class="orang"><a href="#">header</a></li>
                 <li class="orang"><a href="#">aside</a></li>
                 <li class="orang"><a href="#">footer</a></li>
                </div>
            </ul>
             <ul class="parent" onclick="mangoGrape()"><img src="img3.jpg">Widjet</ul>

        </div>


        <script>
            window.mangoGrape = function(elm){
              var invisible = false;
              if(elm){
                invisible = elm.querySelector("li").style.display == "none";
              }
              document.querySelectorAll('li').forEach(function(node){
                node.style.display="none";
              })
              if(invisible){
                elm.querySelectorAll("li").forEach(function(node){
                  node.style.display="block";
                })
              }
            }
        </script>
    </body>
</html>

associated CSS; 相关的CSS;

li a{
    text-decoration: none;
}
.parent li{
    list-style-type: none;
    display: none;
    text-decoration: none;
}
#bad .parent{
    cursor: pointer;
    font-family: sans-serif;
    line-height: 200%;


}
#bad{

    background-color: #023b3b;
        width: 15%;

    height: 100%;
    color: white;
}
/* #bad .parent {
    height: 100%;
    width: 100%;
    display: block;
    cursor: pointer;
    line-height: 3%;
    height: 30px;
    background: #023b3b;
    color: white;
    text-align: center;
}*/
#pappaya {
    background-color:#339933;
    width: 180%;
    margin-left: -28%;
    padding-left: 38%;
    padding-right: 40%;
    width: 50%;
    /*text-align: center;
    margin-right:122%;*/
}
 #pappayas {
        /*background-color:#339933;
         width: 100%;
    margin-left: -50%;
    padding-left: 50%;*/
    background-color:#339933;
    width: 180%;
    margin-left: -28%;
    padding-left: 38%;
    padding-right: 40%;
    width: 50%;
    }
#pappaya li:hover{
    background-color: #122112;
    color: white;
    width: 184%;
    margin-left: -75%;
    padding-left: 70%;
}
#pappaya li a:hover{
    color: white;

}
#pappayas li:hover{
    /*text-align: center;*/
    background-color: #122112;
    color: white;
    width: 184%;
    margin-left: -75%;
    padding-left: 70%;
}
#pappayas li a:hover{
    color: white;

}

#bad{

    background-color: #023b3b;
        width: 15%;

    height: 100%;
    color: white;
}
#bad .parent:hover
{
    background-color: #122112;
    color: white;
    width: 78%;
}
#bad ul:hover{
    background-color: #122112;}
#bad .parent:hover ~ .parent img{
    width: 13%;
    height: 3%;
}

/*new setup*/
#boa{
    height: 5%;
    width: 20%;
    float: left;

}
.bob{
    text-indent: 200%;
    line-height: 210%;
    font-size: 150%;
    font-family: sans-serif;
    color: white;
    font-weight: bold;

}
#buttnsec{
     margin-left: 94%;
        width: 10%;
        hyphens: 20%;
}
.boc{
    text-indent: 4%;
    color : white;
    font-size: 83%;
    font-family: sans-serif;

    font-weight: normal;
}
.parent img{
    float: left;
    width: 15%;
    height: 3%;
    margin-left: -12%;
    margin-right: 20%;
}
/*#bad .parent :hover{
     background: #122112;
}*/

In this code on mouseover on an item the images below the corresponding item become smaller, instead of that I want to reduce the size of the image of the item the mouse pointer currently stands/focused. 在此代码上，将鼠标悬停在某个项目上时，对应项目下的图像会变小，而不是我要减小鼠标指针当前站立/聚焦的项目图像的大小。 view current output 查看当前输出

Answer 1

Try changing 尝试改变

#bad .parent:hover ~ .parent img{
    width: 13%;
    height: 3%;
}

to 至

#bad .parent:hover img{
    width: 13%;
    height: 3%;
}

Now, it'll work if you just hover over the menu item. 现在，将鼠标悬停在菜单项上即可使用。

Answer 2

Look at this: 看这个：

#bad .parent:hover ~ .parent img{
    width: 13%;
    height: 3%;
}

to: 至：

#bad .parent:hover > img {
    width: 13%;
    height: 3%;
}

Working example here 这里的工作示例

要突出显示鼠标悬停在相应项目上的图像。

问题描述

2 个解决方案

解决方案1
3 已采纳 2016-08-18 09:41:53

解决方案2
1 2016-08-18 07:13:26

要突出显示鼠标悬停在相应项目上的图像。

问题描述

2 个解决方案

解决方案1 3 已采纳 2016-08-18 09:41:53

解决方案2 1 2016-08-18 07:13:26

解决方案1
3 已采纳 2016-08-18 09:41:53

解决方案2
1 2016-08-18 07:13:26