hover控制元素的显示和隐藏不生效

原因：点击的元素和需要显示隐藏的元素不属于一个父级元素，如果想要hover伪类生效的话，点击的元素和显示隐藏的元素需要属于同一个父级元素，例如。
html部分
<div class="box">
  <button class="top">显示div</button>
  <div class="bottom">我显示了</div>
</div>
CSS部分 
.box{
width:200px;
.top{
width:100px;
height:50px;
background:blue;
.bottom{
display:none;/*先让div隐藏*/
width:100px;
height:100px;
color:white;
background:yellow;
.top:hover .bottom{
display:block;/*hover时显示div*/
                                    遇到需求: 想要实现父元素hover时,两个子元素字体颜色都变化,但是一开始怎么设置都不生效.方案,字体颜色怎么都不会变,使用第二种方案就可以了./* 方法1 这样是无效的 *//* 方法2 这样使有效的 */此前已经有样式覆盖,
                                    css的hover易错点当hover后面跟的是兄弟元素的时候一定要加+号当hover后面跟的是儿子元素的时候则不需要加
当hover后面跟的是兄弟元素的时候一定要加+号
当hover后面跟的是兄弟元素的时候一定要加+号
我花了好几分钟以为是代码写错了，一直不出效果，谁知道没有加+号
<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta http-equiv=
<c:if test="${'1'.equals(btnPrinFlg) }">
	<input name="othSaveOffline" id ="othSaveOffline" style="margin-right: 10px;"
	type="button" onclick="sendUpdatePo('${ctx}/po/updateSaveOffline.do',false)"
	value="更新" ${("518" eq tdpSo.docStatus or "
                                    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta h
                                    关于一个元素的显示和隐藏有很多的方法，随便百度就可以找到办法，这边我就记录一下我是怎么显示和隐藏的，便于以后回顾。
需求是：当state为1和2时，按钮（id是plshbtn）就是隐藏起来；当state为0时，按钮就会显示。
js方法如下：
if($("#state").val()==0){
		$("#plshbtn").attr("style","display:block;");
                                    css a:hover显示隐藏的东西不出来。js控制div显示与隐藏,js利用"hover"属性1.首先样式要设定好，在每个li区域只能显示a或者b。 2.引入js库代码(jquery库需要引用，1.4版本以上都可以) 3.设定外部ul的id属性：假设为ullist 4.编写js代码 下面是我写的一个例子代码，供你参考，jquery库需要自己下载并引用 A面内容 B面内怎么用hover显示div鼠...
                                    <p>在 CSS 中，可以使用下列语法在 :hover 时控制子项的显示和不显示:</p>
<p>父元素:hover 子元素 {
    display: none/block/inline/inline-block;
<p>例如：</p>
<style>
    .parent:hover .chil...