問題: 當項目處于懸停狀態時，我試圖高亮顯示它們的頂部和底部邊框。

問題是我使用border-collapse: collapse語句來折疊相鄰的邊框。懸停效果沒有解決想要的樣式。

下面你會發現HTML和CSS:

HTML:

<table class="accordion-container">
        <tr class="accordionItem-container" v-for="(item, index) in state.topics" :key="index">
            <td class="accordionItem">
                <div class="accordionImage-container">
                    <img class="accordionImage" :src="item.img" alt="">
                </div>
                <div class="accordionCopy-container">
                    <BaseHeading class="accordionHeader">
                        <template #default>
                            <span class="mainHeader">{{ item.mainHeader }}</span>
                            <span class="subHeader">{{ item.subHeader }}</span>
                        </template>
                    </BaseHeading>
                </div>
            </td>
        </tr>
        <tr class="accordionItem-container" v-for="(item, index) in state.topics" :key="index">
            <td class="accordionItem">
                <div class="accordionImage-container">
                    <img class="accordionImage" :src="item.img" alt="">
                </div>
                <div class="accordionCopy-container">
                    <BaseHeading class="accordionHeader">
                        <template #default>
                            <span class="mainHeader">{{ item.mainHeader }}</span>
                            <span class="subHeader">{{ item.subHeader }}</span>
                        </template>
                    </BaseHeading>
                </div>
            </td>
        </tr>
    </table>

CSS:

<style scoped>
    .accordion-container {
        border-collapse: collapse;
        border-spacing: 0 4px;
    }
    .accordionItem-container {
        border: 4px solid #EBEEF0;
        border-left: none;
        border-right: none;
    }
    .accordionItem-container:hover {
        border: 4px solid #006366;
        border-left: none;
        border-right: none;
    }
    .accordionItem {
        display: flex;
        padding: 16px 0 20px 0;
        gap: 20px;
        align-items: center;
    }
    .accordionImage-container {
        width: 61px;
        height: 56px;
    }
    .accordionImage {
        border-radius: 12px;
        max-width: 100%;
        height: auto;
    }
    .accordionHeader {
        display: flex;
        flex-direction: column;
    }
    .mainHeader {
        font-weight: 400 !important;
    }
    .subHeader {
        font-weight: 300 !important;
        font-size: 16px;
    }

    @media screen and (max-width: 1024px) {
        .accordionImage-container {
            display: none;
        }
    }
</style>

這里還有一個jsfiddle的鏈接:https://jsfiddle.net/MarquezTMoore/Lyb5ah7o/6/

我已經嘗試在懸停狀態下使用輪廓屬性，但是這會給所有四個邊添加輪廓...

問題是試圖給tr一個邊界。請嘗試以下方法: 。accordion item-container:hover TD { }

CSS樣式表格 https://www.w3schools.com/css/css_table.asp

這可以通過使用類似after和before的偽元素來實現

.accordion-container {
        border-collapse: collapse;
        border-spacing: 0 4px;
}
.accordionItem-container {
        border: 4px solid #EBEEF0;
        border-left: none;
        border-right: none;
        position:relative;
        cursor:pointer;
}

.accordionItem-container:hover:after  {
        width:100%;
}
.accordionItem-container:hover:before  {
        width:100%;
}
.accordionItem-container:after{
   content:'';
   position:absolute;
   height:4px;
   top:0;
   left:0;
   background-color:#006366;
}
.accordionItem-container:before{
   content:'';
   position:absolute;
   height:4px;
   bottom:0;
   left:0;
   background-color:#006366;
}

<table class="accordion-container">
        <tr class="accordionItem-container">
            <td class="accordionItem">
               some content
            </td>
        </tr>
        <tr class="accordionItem-container">
            <td class="accordionItem">
                some content
            </td>
        </tr>
         <tr class="accordionItem-container">
            <td class="accordionItem">
                some content
            </td>
        </tr>
</table>