Question

我有3个div，我试图让它们立刻悬停。上面的2正在扩展和隐藏边界，中风围绕着它们。我可以用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放在其父级上。

.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一次悬停

1 个答案: