當單獨的按鈕聚焦時如何使元素出現

#desc {
    visibility: hidden;
    opacity: 0;
}

.exp-container > .buttons:has(.button:focus)   #desc {
    opacity: 1;
    transition: 0.5s;
}

.exp-container > .buttons:has(#OMI:focus)   #desc > .top > h1:before {
    visibility: visible;
    transition: 0.5s;
    content: "Graphic Design Lead";
}

.exp-container > .buttons:has(#OMI:focus)   #desc > .top > .date:before {
    visibility: visible;
    transition: 0.5s;
    content: "July 2021 - July 2022";
}

.exp-container > .buttons:has(#OMI:focus)   #desc > .content > .exp::before {
    visibility: visible;
    transition: 0.5s;
    content: "- Developing screens and UI components for the web application using React and Tailwind. - Fixing UI issues and integrating backend APIs with Redux Saga.";
}

.exp-container > .buttons:has(#OMI:focus)   #desc > .content > .comp::before {
    visibility: visible;
    transition: 0.5s;
    content: "Remote";
}

<div class="exp-container">
    <div class="title">
        EXPERIENCE
    </div>

    <div class="buttons">
        <button class="button" id="OMI"><span>ONE</span></button>
        <button class="button" id="RC"><span>TWO</span></button>
        <button class="button" id="MRKT"><span>THREE</span></button>
        <button class="button" id="BIBLE"><span>FOUR</span></button>
        <button class="button" id="FREE"><span>FIVE</span></button>
        <button class="button" id="CHAR"><span>SIX</span></button>
    </div>

    <div id="desc">
        <div class="top">
            <h1>Placeholder Text <span class="date">Month 2022 - Month 2022</span></h1>
        </div>

        <div class="content">
            <div class="comp">Placeholder Text</div>
            <div class="exp">Placeholder Text<br>Placeholder Text<br>Placeholder Text</div>
        </div>
    </div>
</div>

我做了一些更改，包括 try :has()，但我現在的問題是我想對齊這些按鈕，以便它們均勻地適合流體背景。

這樣做需要按鈕與內容位于單獨的 div 中，以便我能夠使按鈕彎曲（據我所知）。

這可能只用 CSS 還是我必須包含 js？

uj5u.com熱心網友回復：

在您的場景（僅 CSS）中，要使其正常作業，您需要兩件事，

1. 壓平按鈕元素——這意味著移除.buttons容器

• 或者改用 :has() 選擇器.exp-container > .buttons:has(.button):hover ~ #desc-container

2. 洗掉:aftercss 中的標簽#desc-container:after->#desc-container

這樣你就可以在你的CSS中指定每個按鈕來顯示什么背景關系

另見：這個答案

看例子：

#desc-container {
    width: 100%;
    display: none;
}

.exp-container > .button:hover ~ #desc-container {
    display: block;
}

<div class="exp-container">
        <div class="title">
            TITLE
        </div>

            <button class="button">
                <span>ONE</span>
            </button>
            <button class="button">
                <span>TWO</span>
            </button>
            <button class="button">
                <span>THREE</span>
            </button>
            <button class="button">
                <span>FOUR</span>
            </button>
            <button class="button">
                <span>FIVE
            </button>
            <button class="button">
                <span>SIX</span>
            </button>

        <div id="desc-container">
            <div class="top">
                <h1>TITLE <span class="date">July 2021 - July 2022</span></h1>
            </div>

            <div class="content">
                <div class="comp">EXAMPLE</div>
                <div class="exp">
                    EXAMPLE
                </div>
            </div>
        </div>
   </div>

uj5u.com熱心網友回復：

我不確定 CSS 是否 100% 可行。您可以像這樣使用一點點 JavaScript：

const buttons = document.querySelectorAll('.button');
const container = documetn.querySlector('#desc-container');

function handleHover(e) {
   const elementId = e.id;

   switch (elementId) {
      case '1':
         container.innerHTML = 'Some text on hover 1. el';
      case '2':
         container.innerHTML = 'Some text on hover 2. el';
      case '3':
         container.innerHTML = 'Some text on hover 3. el';
      default:
         return;
   }
}


buttons.forEach((element) => {
   element.addEventListener('mouseover', handleHover);
})

在 HTML 中，您需要為每個按鈕添加 id

uj5u.com熱心網友回復：

讓我們不要忘記：有！這完全有可能只用 css！但是檢查瀏覽器兼容性，現在相當廣泛！

https://caniuse.com/css-has

.buttons:has(.button:hover) ~ #desc-container{
 display:block !important;
}


#desc-container {
    width: 100%;
    display: none;
}

<div class="buttons">
            <button class="button">
                <span>ONE</span>
            </button>
            <button class="button">
                <span>TWO</span>
            </button>
            <button class="button">
                <span>THREE</span>
            </button>
            <button class="button">
                <span>FOUR</span>
            </button>
            <button class="button">
                <span>FIVE
            </button>
            <button class="button">
                <span>SIX</span>
            </button>
        </div>

        <div id="desc-container">
            
            <div class="top">
                <h1>TITLE <span class="date">July 2021 - July 2022</span></h1>
            </div>

            <div class="content">
                <div class="comp">EXAMPLE</div>
                <div class="exp">
                    EXAMPLE
                </div>
            </div>
        </div>

標籤：网页格式CSS前端

上一篇：如何擺脫焦點上奇怪的表格邊框

下一篇：使用JavaScript調整網格大小