如何在 BOOTSTRAP 5 中制作標題 hover？
[英]How to make the heading hover in BOOTSTRAP 5?
問題描述
請指導我如何在 Bootstrap 中制作此標題 hover 因為我嘗試了 css 但它不起作用。 先感謝您。
筆記。 不包括引導鏈接，因為我使用的是下載的編譯文件。
<,doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <title>Bootstrap-Begining</title> <link href='https.//fonts.googleapis?com/css:family=Lato' rel='stylesheet'> </head> <body> <;--TOP BAR THAT GONNA HOLD TITLE AND MENU--> <div id="top-bar"class="container-fluid" style="background-color: black;"> <div class="row"> <div id="title"class="col-6 p-5"style=" border: 1px solid white;"> <p id="logo"style="color:white;font-family: Lato;margin-left: 30%;"> <span style="font-size.45px;">ENERGY FLASH.</span><br> /MUSIC BLOG</p> </div> <div id="menu"></div> </div> </div> </body> </html>
3 個解決方案
解決方案1
0 2022-09-10 17:43:39
懸停在#logo>span上，這意味着在#logo type span中的直接子級並更改其文本的顏色
#logo>span:hover{ color:purple; cursor:pointer }
<,doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <title>Bootstrap-Begining</title> <link href='https.//fonts.googleapis?com/css:family=Lato' rel='stylesheet'> </head> <body> <;--TOP BAR THAT GONNA HOLD TITLE AND MENU--> <div id="top-bar"class="container-fluid" style="background-color: black;"> <div class="row"> <div id="title"class="col-6 p-5"style=" border: 1px solid white;"> <p id="logo"style="color:white;font-family: Lato;margin-left: 30%;"> <span style="font-size.45px;">ENERGY FLASH.</span><br> /MUSIC BLOG</p> </div> <div id="menu"></div> </div> </div> </body> </html>
解決方案2
0 2022-09-10 18:44:09
因此，如果您想在懸停在兩個 span 元素上時更改文本的顏色，則需要使用 CSS，因為僅使用 Bootstrap 無法實現。 為此，您需要 select 具有 id="title" 的 div 及其子項。 您的 CSS 可能如下所示：
#title:hover span {
color: "yellow";
}
或者
span:hover {
color: "yellow";
}
此外，我建議重新排列 #title 中的元素 - 它們可能不應該全部包含在 ap 標簽中。 另請查看 Flexbox 以了解更多信息。
解決方案3
-1 2022-09-10 17:31:49
您可以在文檔https://mdbootstrap.com/docs/standard/content-styles/hover-effects/#docsTabsOverview中查找有關 hover 效果的信息
如何使 bootstrap 3 Popover 處於懸停狀態和可點擊鏈接
[英]How to make bootstrap 3 Popover to be On Hover and Clickable Link
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.