0

I created a button in LWC to bulk download files. As shown below, when hovering over a menu item, it gets surrounded by a blue line. I want to make it so that the blue line is not displayed when hovering over the button, just like the default menu button. How should I modify the HTML and CSS to meet this requirement?

Lightning Button I made it Menu Button item style when curs

〇HTML

<template>
<div class="container forceRelatedListSingleContainer">
    <template if:true={showSpinner}>
        <div class="spinner-container"><lightning-spinner alternative-text="ロード中" size="small"></lightning-spinner></div>
    </template>
    <article class="slds-card slds-card_boundary headerBottomBorder forceRelatedListCardDesktop">
        <div class="slds-grid slds-page-header forceRelatedListCardHeader">
            <header class="slds-media slds-media_center slds-has-flexi-truncate">                    
                <div class="slds-media__figure stencil slds-avatar slds-avatar_small">
                    <lightning-icon icon-name="standard:file" alternative-text="File" title="File" size="x-small"></lightning-icon>    
                </div>
                <div class="slds-media__body">
                    <h2 class="slds-card__header-title">
                        <a class="slds-card__header-link no-cursor">
                            <span class="slds-truncate slds-var-m-right_xx-small">{relatedListTitle}</span> 
                            <template if:true={files}>
                                <span class="slds-shrink-none slds-var-m-right_xx-small"> ({filesCount}) (アップロード不可)
                                </span>
                            </template>
                        </a>
                    </h2>
                </div>
                <!-- ▼Button -->
                <lightning-button-menu alternative-text="さらにアクションを表示" icon-size="x-small" variant="border-filled" menu-alignment="right" onselect={handleOnselect} class="slds-button slds-button_neutral">
                    <lightning-menu-item value="downloadFileAll" label="一括ダウンロード"></lightning-menu-item>
                </lightning-button-menu>
                <!-- ▼Button end -->
            </header>

〇CSS

 /*Button*/
.slds-button_neutral:hover, .slds-button_neutral:focus {
text-decoration: none;
outline: none;
box-shadow: none;
}
New contributor
Yuka Fukuchi is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

0

You must log in to answer this question.

Browse other questions tagged .