用CSS更改文本名稱

當菜單打開時，我正嘗試將「菜單」中的文本更改爲「關閉菜單」。我不知道該怎麼做。用CSS更改文本名稱

這是我的HTML：

<input type="checkbox" id="responsive-nav"> 
<label for="responsive-nav" class="responsive-nav-label"> 
    <span>&#9776;</span> Menu 
</label> 

<nav> 
    <ul> 
     <li><a href="download.php">Download Apps</a></li> 
     <li><a href="manual.php">Download Manuals</a></li> 
    </ul> 
</nav>

這是我的CSS：

/* MENU */ 

/* hide the checkbox and the label */ 
input#responsive-nav, 
label.responsive-nav-label { 
    display: none; 
    font-size: 15pt; 
} 

/* declarations for the not-responsove-menu */ 
nav { 
    width: 220px; /* Darüber laesst sich die breite des Aufklappmenue steuern */ 
    margin-left: -10px; 
    background: black 
} 

nav ul { 
    padding: 0px; 
    margin-left: -10px; 
    margin-top: 43px; 
} 

nav a { 
    display: block; 
    background: #FFF; 
    text-decoration: none; 
    color: white; 
    font-size: 15pt; 
} 

nav ul li { 
    position: relative; 
    float: left; 
    list-style: none; 
    color: #FFF; 
    transition: 0.5s; 
} 

/* Declarations for the responsive menu 1680px */ 
@media screen and (max-width: 15360px) { 

    * { 
     font-size: 15pt; 
    } 

    label.responsive-nav-label { 
     position: relative; 
     display: block; 
     padding: 0px; 
     background: black; 
     cursor: pointer; 
     color: #fff; 
    } 

    nav { 
     position: absolute; 
     top: -9999px; 
     padding: 0px; 
    } 

    input#responsive-nav[type=checkbox]:checked ~ nav { 
     position: relative; 
     top: 0; 
    } 

    nav a:after { 
     display: none; 
    } 

    nav li { 
     float: none !important; 
     width: 100% !important; 
     border-bottom: none !important; 
    } 

    nav li a { 
     margin-bottom: 10px !important; 
     padding: 10px 20px !important; 
     background: black; 
    } 

    nav ul li:hover { 
     background: none; 
    } 

    nav ul li a:hover { 
     background: black; 
     color: #11BEE0 
    } 
} 
/* END OF MENU */

來源

2017-04-01 Roman

使用JavasScript或jQuery的可以幫助你，我想。 –

做到這一點，最簡單的辦法就是真正從實際HTML刪除單詞「菜單」，並添加兩個數據屬性要切換

之間

所以你的標籤看起來像這樣

菜單

<label for="responsive-nav" class="responsive-nav-label" data-closed=" Menu" data-open=" Close Menu"><span>&#9776;</span></label>

下一個你必須根據你的複選框是否被選中或不2款這樣

/* toggle the menu text */ 
input#responsive-nav[type=checkbox]:checked ~ label.responsive-nav-label:after{ 
    content: attr(data-open); 
} 
input#responsive-nav[type=checkbox] ~ label.responsive-nav-label:after{ 
    content: attr(data-closed); 
}

這裏切換的內容是COMPLE TE代碼，您可以測試

/* hide the checkbox and the label */ 
 

 
input#responsive-nav, 
 
label.responsive-nav-label { 
 
content: "Menu Hide"; 
 
display: none; 
 
font-size: 15pt; 
 
} 
 

 
/* declarations for the not-responsove-menu */ 
 

 
nav { 
 
    width: 220px; /* Darüber laesst sich die breite des Aufklappmenue steuern */ 
 
    margin-left: -10px; 
 
background: black; 
 
} 
 

 
nav ul { 
 
    padding: 0px; 
 
    margin-left: -10px; 
 
    margin-top: 43px; 
 
} 
 

 
nav a { 
 
    display: block; 
 
    background: #FFF; 
 
    text-decoration: none; 
 
color: white; 
 
font-size: 15pt; 
 
} 
 

 
nav ul li { 
 
    position: relative; 
 
    float: left; 
 
    list-style: none; 
 
    color: #FFF; 
 
    transition: 0.5s; 
 
} 
 

 
/* Declarations for the responsive menu 1680px */ 
 
@media screen and (max-width: 15360px) { 
 

 
* { 
 
font-size: 15pt; 
 
} 
 

 

 
label.responsive-nav-label { 
 
    position: relative; 
 
    display: block; 
 
    padding: 0px; 
 
    background: black; 
 
    cursor: pointer; 
 
    color: #fff; 
 
    
 
} 
 

 
nav { 
 
    position: absolute; 
 
    top: -9999px; 
 
    padding: 0px; 
 
} 
 

 
input#responsive-nav[type=checkbox]:checked ~ nav { 
 
    position: relative; 
 
    top: 0; 
 
} 
 

 
/* toggle the menu text */ 
 
input#responsive-nav[type=checkbox]:checked ~ label.responsive-nav-label:after{ 
 
    content: attr(data-open); 
 
} 
 
input#responsive-nav[type=checkbox] ~ label.responsive-nav-label:after{ 
 
    content: attr(data-closed); 
 
} 
 

 
nav a:after { 
 
    display: none; 
 
} 
 

 
nav li { 
 
    float: none !important; 
 
    width: 100% !important; 
 
    border-bottom: none !important; 
 
} 
 

 
nav li a { 
 
    margin-bottom: 10px !important; 
 
    padding: 10px 20px !important; 
 
background: black; 
 
} 
 

 
nav ul li:hover { 
 
    background: none; 
 
} 
 

 
nav ul li a:hover { 
 
    background: black; 
 
    color: #11BEE0 
 
} 
 

 
} 
 
/* END OF MENU */

<input type="checkbox" id="responsive-nav"> 
 

 
<label for="responsive-nav" class="responsive-nav-label" data-closed=" Menu" data-open=" Close Menu"><span>&#9776;</span></label> 
 

 
<nav> 
 
    <ul> 
 
    <li><a href="download.php">Download Apps</a></li> 
 
    <li><a href="manual.php">Download Manuals</a></li> 
 
    </ul> 
 
</nav>

來源

2017-04-01 07:57:08 Jpsh

非常感謝！這解決了我的問題，並完美的作品！謝謝！ – Roman

既然你已經在使用checkbox hack爲您的菜單，我們可以用它來顯示和隱藏標籤內的文字。

標籤裏面，我們添加兩個<span>的與根據文本：

<label for="responsive-nav" class="responsive-nav-label"> 
<span>&#9776;</span> 
<span class="open">Close Menu</span> 
<span class="closed">Menu</span> 
</label>

，因爲我們希望‘關閉菜單’最初被隱藏，我們添加

.open { 
    display: none 
}

我們的CSS 。

當複選框被選中（這意味着菜單是可見的），只是藏在「菜單」，並顯示「關閉菜單」：

input#responsive-nav[type=checkbox]:checked ~ .responsive-nav-label > .closed { 
    display: none; 
} 

input#responsive-nav[type=checkbox]:checked ~ .responsive-nav-label > .open { 
    display: inline; 
}

這裏有一個jsfiddle with the working code。

來源

2017-04-01 07:56:59 chrispop

還有就是你的一個類似的問題。

如果你堅持用css替換文本內容，你可以訪問下面的鏈接。

How to change content on hover

否則強烈建議使用JavaScript而不是CSS更換或切換內容。

$(document).on("click","#menu-label",function(){ 
 
var $this = $(this); 
 

 
if ($this.text() === "Menu"){ 
 
     $this.text("Close") 
 
}else { 
 
     $this.text("Menu") 
 
} 
 
});

/* hide the checkbox and the label */ 
 

 
input#responsive-nav, 
 
label.responsive-nav-label { 
 
display: none; 
 
font-size: 15pt; 
 
} 
 

 
/* declarations for the not-responsove-menu */ 
 

 
nav { 
 
    width: 220px; /* Darüber laesst sich die breite des Aufklappmenue steuern */ 
 
    margin-left: -10px; 
 
background: black 
 
} 
 

 
nav ul { 
 
    padding: 0px; 
 
    margin-left: -10px; 
 
    margin-top: 43px; 
 
} 
 

 
nav a { 
 
    display: block; 
 
    background: #FFF; 
 
    text-decoration: none; 
 
color: white; 
 
font-size: 15pt; 
 
} 
 

 
nav ul li { 
 
    position: relative; 
 
    float: left; 
 
    list-style: none; 
 
    color: #FFF; 
 
    transition: 0.5s; 
 
} 
 

 
/* Declarations for the responsive menu 1680px */ 
 
@media screen and (max-width: 15360px) { 
 

 
* { 
 
font-size: 15pt; 
 
} 
 

 

 
label.responsive-nav-label { 
 
    position: relative; 
 
    display: block; 
 
    padding: 0px; 
 
    background: black; 
 
    cursor: pointer; 
 
    color: #fff; 
 
} 
 

 
nav { 
 
    position: absolute; 
 
    top: -9999px; 
 
    padding: 0px; 
 
} 
 

 
input#responsive-nav[type=checkbox]:checked ~ nav { 
 
    position: relative; 
 
    top: 0; 
 
} 
 

 
nav a:after { 
 
    display: none; 
 
} 
 

 
nav li { 
 
    float: none !important; 
 
    width: 100% !important; 
 
    border-bottom: none !important; 
 
} 
 

 
nav li a { 
 
    margin-bottom: 10px !important; 
 
    padding: 10px 20px !important; 
 
background: black; 
 
} 
 

 
nav ul li:hover { 
 
    background: none; 
 
} 
 

 
nav ul li a:hover { 
 
    background: black; 
 
    color: #11BEE0 
 
} 
 

 
} 
 
/* END OF MENU */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" id="responsive-nav"> 
 
<label for="responsive-nav" class="responsive-nav-label" ><span>&#9776;</span> <span id="menu-label">Menu</span></label> 
 

 
<nav> 
 
    <ul> 
 
    <li><a href="download.php">Download Apps</a></li> 
 
    <li><a href="manual.php">Download Manuals</a></li> 
 
    </ul> 
 
</nav>

來源

2017-04-01 08:35:51 user3141505

用CSS更改文本名稱

回答

相關問題