html - 为什么当我使用 svg 行时，我的 div 附近会出现一个未识别的段？

Question

我有一个 svg 元素，它位于两个具有圆边的 div 元素之间。 div 和 svg 线显示正确，但由于某种原因，当我将鼠标悬停在 div 上时，每行的左下方会出现一条黑色的小线段，当我停止悬停时它会消失。这只是 Chrome 中的问题，而不是 IE 中的问题。如何去除黑色部分？

<style>


#main_item_list{
    list-style-type: none; 
    position: absolute; 
    padding-left: 0px;
}

.ListItemContainer{margin-bottom: 20px;}


.opaqueBlock{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    margin-left: 39px; 
    width: 360px; 
    height: 46px; 
    background-color: rgba(72, 97, 115, 0.6);
    border-radius: 10px;
    display: inline-block;
}

.opaqueBlockSubBlock{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    margin-left: 60px; 
    width: 220px; 
    height: 36px; 
    background-color: rgba(72, 97, 115, 0.6);
    border-radius: 10px;
}

.formTextSpan{
    position: absolute; 
    z-index: 1; 
    margin-left: 23px; 
    color: white; 
    margin-top: 7px; 
    font-family: 'Didact Gothic' !important; 
    font-size: 23px !important;
}

.formTextSpanSubItem{
    position: absolute; 
    z-index: 1; margin-left: 23px; 
    color: white; 
    margin-top: 5px; 
    font-family: 'Didact Gothic' !important; 
    font-size: 20px !important;
}

.dotIcon{
    height: 30px;
    width: 30px;
    background-color: #ADDBFF;
    position: absolute; 
    margin-left:13px;
    margin-top: 7px;
    border-radius: 15px;
    opacity: .7; 
    box-shadow: 0 0 10px 1px white;
}

.dotLine{
    position: relative;
    left: 43px;
    top: -18px;
    stroke: white;
}


</style>




<div id="TechBackgroundContainer" style="background-color: lightseagreen; height: 300px;">


<ul id="main_item_list">

    <li id="DotItem1" class="ListItemContainer">
        <a href="#" target="_blank">
        <div class="dotIcon" id="dotIcon1"></div>
        <svg class="dotLine" height="5" width="17"><line x1="0" y1="0" x2="17" y2="0"/></svg>
        <div class="opaqueBlock" style=""><span class="formTextSpan">Internal Communication</span></div>
        </a>
    </li>

    <li id="DotItem2" class="ListItemContainer">    
        <a href="#" target="_blank">
        <div class="dotIcon" id="dotIcon2"></div>
        <svg class="dotLine" height="5" width="17"><line x1="0" y1="0" x2="17" y2="0"/></svg>
        <div class="opaqueBlock" style=""><span class="formTextSpan">Reports Package</span></div>
        </a>
    </li>

    <li id="DotItem3" class="ListItemContainer">    
        <a href="#" target="_blank">
        <div class="dotIcon" id="dotIcon3"></div>
        <svg class="dotLine" height="5" width="17"><line x1="0" y1="0" x2="17" y2="0"/></svg>
        <div class="opaqueBlock" style=""><span class="formTextSpan">Talking Points</span></div>
        </a>    

    </li>

</ul>


</div>
</div>

Answer 1

将此行添加到您的 CSS:

#main_item_list a { 
    text-decoration: none;
}