当用户点击任何一个圈我想显示下面的效果。考虑粉红色圆圈

Question

当用户点击任何圆圈时，我想显示下面的效果。考虑粉红色的颜色圈。

] 1

的OnClick上的任何圆圈然后我想要绘制如图在图像中。

我可以用下面的代码片段画圆：

<div className="tableRow"> 
       {this.paletteColors.map((paletteColor) => { 
        return (<li className="color-li"> 
         <div className="circle" 
          style={{ 
           "backgroundColor": paletteColor 
          }} 
          data-colorval={paletteColor} 
          onClick={this.paletteColorClick} 
         > </div> 
        </li>); 
       })} 
      </div> 

.color-li { 
    display: inline-block; 
    position: relative; 
} 

.circle { 
    border-radius: 50%; 
    height: 40px; 
    text-align: center; 
    width: 40px; 
    margin: 0px 12px; 
    line-height: 40px; 
    z-index: 3; 
    position: relative; 
} 

Answer 1

的box-shadow一点jQuery的可以管理大部分是混合物，background-clip，box-sizing:border-box等和：

(function($) { 
 
    $('.circle').click(function() { 
 
    $(this).toggleClass('open'); 
 
    }); 
 
})(jQuery);

body { 
 
    background: lightgreen; 
 
} 
 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 
.circle { 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 50%; 
 
    border: 0px solid transparent; 
 
    background-clip: padding-box; 
 
    margin: 3em; 
 
    display: inline-block; 
 
    transition: border-width .3s ease; 
 
    box-shadow: 0 0 0 2px; 
 
} 
 
.circle.red { 
 
    color: red; 
 
    background-color: red; 
 
} 
 
.blue { 
 
    background-color: blue; 
 
    color: blue; 
 
} 
 
.circle.open { 
 
    border-width: 15px !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="circle red"></div> 
 

 
<div class="circle blue"></div>