3个div一次悬停

Question

我有 3 个 div，我想让它们同时悬停。上面的 2 个正在扩展和隐藏边框，笔划围绕 them.Can 我用 css 来做？这是我的代码：https://jsfiddle.net/ivailo/1hx4axpt/2/

.buttonmenu1{
height:176px;
width: 175px;
border: 1px solid #c2b6b4;
border-radius:7px;
background-color: rgba(215,209,194,.5);
position:relative;
left:186px;  
top:86px;

border-bottom-left-radius:4px;
border-bottom-right-radius:4px;
overflow: hidden;

} 
.buttonmenu1:hover{
border: 0px solid #c2b6b4;
border-radius:0;
overflow:visible;
height:178px;
width:180px;
}



.buttonmenu1a{

height:27px;
background: rgb(202,224,130);
background: -moz-linear-gradient(top, rgba(202,224,130,.8) 55%, rgba(209,211,172,1) 85%);
background: -webkit-linear-gradient(top, rgba(202,224,130,.8) 55%,rgba(209,211,172,.1) 85%); 
background: linear-gradient(to bottom, rgba(202,224,130,.8) 55%,rgba(209,211,172,.1) 85%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cae082', endColorstr='#d1d3ac',GradientType=0 );
border-radius:7px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
border-bottom: 1px solid #9d9781;
}
.buttonmenu1b{
height: 1px;
background:white;
display: block;
margin : 2px 0px;
position:relative;
bottom:4px;
}
.textbuttonmenu1{
color:8a8556;
font-size:13pt;
position:relative;
left:56px;
top:3px;
opacity:.8
}

.svg-wrapper {
position: relative;

transform: translateY(-50%);
margin: 0 auto;
width: 320px;  
}
.shape {
stroke-dasharray: 140 540;
stroke-dashoffset: -474;
stroke-width: 8px;
fill: transparent;
stroke: #19f6e8;
border-bottom: 5px solid black;
transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s; 
}
.svg-wrapper:hover .shape {
stroke-width: 2px;
stroke-dashoffset: 0;
stroke-dasharray: 1000;
}

Answer 1

这是一个示例，说明如何使用 1 次悬停更改 3 div 的内容

你把 :hover 放在他们的 parent 上。

.as:hover .buttonmenu1a {
  background: blue;
}
.as:hover .buttonmenu1b {
  background: red;
}
.as:hover .svg-wrapper {
  background: lime;
}

.as2:hover .buttonmenu1a,
.as2:hover .buttonmenu1b,
.as2:hover .svg-wrapper {
  background: yellow;
}

<div class="as">
  <div class="buttonmenu1">
    <div class="buttonmenu1a">A
    </div>
    <div class="buttonmenu1b">B
    </div>
  </div>
  <div class="svg-wrapper">C
  </div>
</div>

<div class="as2">
  <div class="buttonmenu1">
    <div class="buttonmenu1a">A
    </div>
    <div class="buttonmenu1b">B
    </div>
  </div>
  <div class="svg-wrapper">C
  </div>
</div>

3个div一次悬停

3 divs hover at once

html

css

hover