Question

我重新设置了一个复选框，使其看起来像一个按钮，因为我希望在单击按钮时文本显示在按钮下方。我只能使用CSS和HTML，其他任何东西都与我需要工作的程序不兼容。这个复选框hack允许我有一个指针事件，而不是悬停/活动。只出现两个问题，我找不到解决方案。

单击时，第一个按钮会从行中删除其余按钮，第二个按钮会删除其右侧的按钮，第三个按钮会删除其右侧的按钮等。有谁知道需要改变什么才能让它发挥作用？
此外，我想添加一些内容，以确保当按钮处于活动状态时，单击文本框旁边的其他内容时，文本框会消失。因此，您不能同时激活多个按钮。

相当新的CSS，对于代码中的任何奇怪的东西感到抱歉。

#images {
	margin: none;
	padding: none;
	border: none;
	height: 144px;
	width: 720px;
	z-index:10;
}

.checked-selector {display: none;
z-index:100;}
:checked ~ .checked-selector {display: block;z-index:100;}
input.hidden[type=checkbox]  {position: absolute;left: -999em;z-index:100;}

.checkbox {}

.checkbox2 {
	position:relative;
	left:144px;
	top:-149px;
}
.checkbox3 {
	position:relative;
	left:288px;
	top:-297px;
}
.checkbox4 {
	position:relative;
	left:432px;
	top:-445px;
}
.checkbox5 {
	position:relative;
	left:576px;
	top:-593px;
}
.box p{
	font:Arial;
	font-family: Arial;
	font-size: 14px;
	
    height: 104px;
	width: 680px;
    position: relative;
	top:-19px;
	left:2px;
    padding:20px;
	text-align: justify;
	color: #FFF;
	background:url(http://estherslagter.nl/images/New%20folder2/first%20tryout-29.jpg);
	z-index:100;
	}
.box2 p{
	font:Arial;
	font-family: Arial;
	font-size: 14px;
    height: 104px;
	width: 680px;
    position: relative;
	top:-18px;
	left:-142px;
    padding:20px;
	text-align: justify;
	color: #FFF;
	background:url(http://estherslagter.nl/images/New%20folder2/first%20tryout-30.jpg);
	z-index:100
	}
.box3 p{
	font:Arial;
	font-family: Arial;
	font-size: 14px;
    height: 104px;
	width: 680px;
    position: relative;
	top:-18px;
	left:-286px;
    padding:20px;
	text-align: justify;
	color: #FFF;
	background:url(http://estherslagter.nl/images/New%20folder2/first%20tryout-31.jpg);
	z-index:100
	}
.box4 p{
	font:Arial;
	font-family: Arial;
	font-size: 14px;
    height: 104px;
	width: 680px;
    position: relative;
	top:-19px;
	left:-430px;
    padding:20px;
	text-align: justify;
	color: #FFF;
	background:url(http://estherslagter.nl/images/New%20folder2/first%20tryout-32.jpg);
	z-index:100
	}
.box5 p{
	font:Arial;
	font-family: Arial;
	font-size: 14px;
    height: 104px;
	width: 680px;
    position: relative;
	top:-19px;
	left:-574px;
    padding:20px;
	text-align: justify;
	color: #FFF;
	background:url(http://estherslagter.nl/images/New%20folder2/first%20tryout-33.jpg);
	z-index:100
	}
.box6 p{
	font:Arial;
	font-family: Arial;
	font-size: 14px;
	height: 105px;
	width: 680px;
    position: relative;
	top:-17px;
	left:2px;
    padding:20px;
	text-align: justify;
	color: #FFF;
	background:url(http://estherslagter.nl/images/New%20folder2/first%20tryout-34.jpg);
	z-index:100
	}

<div class="images" id="images">
        <div class="checkbox">
    <label for="toggle-hidden_1" >
        <img src="http://estherslagter.nl/images/New%20folder2/first%20tryout-08.jpg" width="144" height="144" alt="inschrijving"></label>
<input type="checkbox" id="toggle-hidden_1" class="hidden" value="1"/>
<div class="checked-selector" value="1"> <div class="box">
 <div class="container" id="hover"><p>
   Als bevestiging van je inschrijving bij de TU Delft ontvang je uiterlijk binnen één maand nadat je aan de inschrijvingsverplichtingen hebt voldaan het Bewijs van Inschrijving, maar niet eerder dan medio augustus.</p></div></div></div></div>
   <div class="checkbox2">
<label for="toggle-hidden_2"><img src="http://estherslagter.nl/images/New%20folder2/first%20tryout-11.jpg" width="144" height="144" alt="eerstejaarsweekend"></label>
<input type="checkbox" id="toggle-hidden_2" class="hidden" value="2"/>
<div class="checked-selector"value="2"/><div class="box2">   <div class="container" id="hover"><p>Het Stylos Eerstejaars Ontvangstweekend (SteeOwee) is van vrijdag 15 t/m zondag 17 augustus. Dit weekend is specifiek voor eerstejaars studenten Bouwkunde, inschrijven kan via de website van studievereniging Stylos.</p> </div></div></div></div>
<div class="checkbox3">
<label for="toggle-hidden_3"><img src="http://estherslagter.nl/images/New%20folder2/first%20tryout-12.jpg" width="144" height="144" alt="eerste collegedag"></label>
<input type="checkbox" id="toggle-hidden_3" class="hidden" value="3"/>
<div class="checked-selector"value="3"/><div class="box3">   <div class="container" id="hover"><p>Op maandag 1 september 2014 begin je aan je eerste dag op de faculteit. Er is een speciaal programma voor alle eerstejaars waarbij je verplicht aanwezig moet zijn. Je ontvangt in augustus een brief met meer informatie over het programma van die dag.</p> </div></div></div></div>
<div class="checkbox4">
<label for="toggle-hidden_4"><img src="http://estherslagter.nl/images/New%20folder2/first%20tryout-14.jpg" width="144" height="144" alt="bouwkunde startpakket"></label>
<input type="checkbox" id="toggle-hidden_4" class="hidden" value="4"/>
<div class="checked-selector"value="4"/><div class="box4">   <div class="container" id="hover"><p>Alle materialen die je nodig hebt voor handtekenen, vormstudie en ontwerpprojecten vind je in het Bouwkunde starterspakket, welke je bij Waltman’s Bouwshop kan aanschaffen. De aankoop van dit pakket is niet verplicht, maar wordt wel aanbevolen. Tijdens je studie heb je ook verschillende materialen nodig voor het maken van maquettes. Deze kun je ook bij Waltman kopen, en/of bij de balie in de Zuidserre. Het gehele pakket is de eerste weken van september verkrijgbaar in de Bouwshop voor € 125.00.</p> </div></div></div></div>
<div class="checkbox5">
<label for="toggle-hidden_5"><img src="http://estherslagter.nl/images/New%20folder2/first%20tryout-13.jpg" width="144" height="144" alt="studiemateriaal"></label>
<input type="checkbox" id="toggle-hidden_5" class="hidden" value="5"/>
<div class="checked-selector"value="5"/><div class="box5">   <div class="container" id="hover"><p>Als je je hebt ingeschreven ontvang je voor aanvang van het studiejaar een brief met daarin o.a. een boekenlijst. Deze boeken zijn verkrijgbaar bij Waltman’s Bouwshop, de materialen- en boekenwinkel naast de hoofdingang van Bouwkunde. Gedurende je studie heb je ook readers nodig. Deze kun je bestellen via Blackboard onder de tab ‘MyStudentInfo’.</p> </div></div></div></div>
</div>

Answer 1

看起来你使用了太多重复的类名。一些修复程序：

将.box重命名为.box。
为所有.box2，.box3，.box4，.box4，.box5，.box6添加公共课.box ，.box2。
复制所有.box3，.box4，.box4，.box5，.box6，.box，{{1}的所有常见CSS而不是position: relative; top: -{some value};。

在每个框中替换以下CSS：

position: absolute;
top: auto;

使用：

position: absolute; top: auto;

尝试为段落提供#images { margin: none; padding: none; border: none; height: 144px; width: 720px; z-index:10; } .checked-selector {display: none; z-index:100;} :checked ~ .checked-selector {display: block;z-index:100;} input.hidden[type=checkbox] {position: absolute;left: -999em;z-index:100;} .checkbox {} .checkbox2 { position:relative; left:144px; top:-149px; } .checkbox3 { position:relative; left:288px; top:-297px; } .checkbox4 { position:relative; left:432px; top:-445px; } .checkbox5 { position:relative; left:576px; top:-593px; } .box p{ font-family: Arial; font-size: 14px; height: 104px; width: 680px; position: absolute; top: auto; left:2px; padding:20px; text-align: justify; color: #FFF; background:url(http://estherslagter.nl/images/New%20folder2/first%20tryout-29.jpg); z-index:100; } .box2 p{ font:Arial; font-family: Arial; font-size: 14px; height: 104px; width: 680px; position: absolute; top: auto; left:-142px; padding:20px; text-align: justify; color: #FFF; background:url(http://estherslagter.nl/images/New%20folder2/first%20tryout-30.jpg); z-index:100 } .box3 p{ font:Arial; font-family: Arial; font-size: 14px; height: 104px; width: 680px; position: absolute; top: auto; padding:20px; text-align: justify; color: #FFF; background:url(http://estherslagter.nl/images/New%20folder2/first%20tryout-31.jpg); z-index:100 } .box4 p{ font:Arial; font-family: Arial; font-size: 14px; height: 104px; width: 680px; position: absolute; top: auto; left:-430px; padding:20px; text-align: justify; color: #FFF; background:url(http://estherslagter.nl/images/New%20folder2/first%20tryout-32.jpg); z-index:100 } .box5 p{ font:Arial; font-family: Arial; font-size: 14px; height: 104px; width: 680px; position: absolute; top: auto; left:-574px; padding:20px; text-align: justify; color: #FFF; background:url(http://estherslagter.nl/images/New%20folder2/first%20tryout-33.jpg); z-index:100 } .box6 p{ font:Arial; font-family: Arial; font-size: 14px; height: 105px; width: 680px; position: absolute; top: auto; left:2px; padding:20px; text-align: justify; color: #FFF; background:url(http://estherslagter.nl/images/New%20folder2/first%20tryout-34.jpg); z-index:100 }吗？

<div class="images" id="images">
  <div class="checkbox">
    <label for="toggle-hidden_1" >
      <img src="http://estherslagter.nl/images/New%20folder2/first%20tryout-08.jpg" width="144" height="144" alt="inschrijving"></label>
    <input type="checkbox" id="toggle-hidden_1" class="hidden" value="1"/>
    <div class="checked-selector" value="1"> <div class="box">
      <div class="container" id="hover"><p>
        Als bevestiging van je inschrijving bij de TU Delft ontvang je uiterlijk binnen één maand nadat je aan de inschrijvingsverplichtingen hebt voldaan het Bewijs van Inschrijving, maar niet eerder dan medio augustus.</p></div></div></div></div>
  <div class="checkbox2">
    <label for="toggle-hidden_2"><img src="http://estherslagter.nl/images/New%20folder2/first%20tryout-11.jpg" width="144" height="144" alt="eerstejaarsweekend"></label>
    <input type="checkbox" id="toggle-hidden_2" class="hidden" value="2"/>
    <div class="checked-selector"value="2"/><div class="box2">   <div class="container" id="hover"><p>Het Stylos Eerstejaars Ontvangstweekend (SteeOwee) is van vrijdag 15 t/m zondag 17 augustus. Dit weekend is specifiek voor eerstejaars studenten Bouwkunde, inschrijven kan via de website van studievereniging Stylos.</p> </div></div></div></div>
<div class="checkbox3">
  <label for="toggle-hidden_3"><img src="http://estherslagter.nl/images/New%20folder2/first%20tryout-12.jpg" width="144" height="144" alt="eerste collegedag"></label>
  <input type="checkbox" id="toggle-hidden_3" class="hidden" value="3"/>
  <div class="checked-selector"value="3"/><div class="box3">   <div class="container" id="hover"><p>Op maandag 1 september 2014 begin je aan je eerste dag op de faculteit. Er is een speciaal programma voor alle eerstejaars waarbij je verplicht aanwezig moet zijn. Je ontvangt in augustus een brief met meer informatie over het programma van die dag.</p> </div></div></div></div>
<div class="checkbox4">
  <label for="toggle-hidden_4"><img src="http://estherslagter.nl/images/New%20folder2/first%20tryout-14.jpg" width="144" height="144" alt="bouwkunde startpakket"></label>
  <input type="checkbox" id="toggle-hidden_4" class="hidden" value="4"/>
  <div class="checked-selector"value="4"/><div class="box4">   <div class="container" id="hover"><p>Alle materialen die je nodig hebt voor handtekenen, vormstudie en ontwerpprojecten vind je in het Bouwkunde starterspakket, welke je bij Waltman’s Bouwshop kan aanschaffen. De aankoop van dit pakket is niet verplicht, maar wordt wel aanbevolen. Tijdens je studie heb je ook verschillende materialen nodig voor het maken van maquettes. Deze kun je ook bij Waltman kopen, en/of bij de balie in de Zuidserre. Het gehele pakket is de eerste weken van september verkrijgbaar in de Bouwshop voor € 125.00.</p> </div></div></div></div>
<div class="checkbox5">
  <label for="toggle-hidden_5"><img src="http://estherslagter.nl/images/New%20folder2/first%20tryout-13.jpg" width="144" height="144" alt="studiemateriaal"></label>
  <input type="checkbox" id="toggle-hidden_5" class="hidden" value="5"/>
  <div class="checked-selector"value="5"/><div class="box5">   <div class="container" id="hover"><p>Als je je hebt ingeschreven ontvang je voor aanvang van het studiejaar een brief met daarin o.a. een boekenlijst. Deze boeken zijn verkrijgbaar bij Waltman’s Bouwshop, de materialen- en boekenwinkel naast de hoofdingang van Bouwkunde. Gedurende je studie heb je ook readers nodig. Deze kun je bestellen via Blackboard onder de tab ‘MyStudentInfo’.</p> </div></div></div></div>
</div>

// string to be obtained in xls file in different columns
var exportString = 'Source1; 240; A/V Signal drop out; 15';  
// creating anchor tag
var a = document.createElement('a');
    a.href = 'data:attachment/xls,' + exportString;
    a.target = '_blank';
    a.download = 'filename.xls';
    document.body.appendChild(a);
    a.click();

Answer 2

对于您正在做的事情，我会使用radio而不是checkbox，以便用户无法进行多项选择。

如果您有类似的内容，可以按照自己的方式设置标签样式：

/* Styles */

input[name="toggles"] {
  display: none;
}
.toggles label {
  display: inline-block;
  padding: 20px;
  color: white;
}
.toggles label:hover {
  cursor: pointer;
  text-decoration: underline;
}
.frame #tab1,
.frame #tab2,
.frame #tab3 {
  display: none;
  border: solid 1px black;
  padding: 20px;
}
/* Tab Controls */

#toggle-tab1:checked ~ .toggles #label-tab1,
#toggle-tab2:checked ~ .toggles #label-tab2,
#toggle-tab3:checked ~ .toggles #label-tab3 {
  background: black;
}
#label-tab1 {
  background: red;
}
#label-tab2 {
  background: blue;
}
#label-tab3 {
  background: green;
}
#toggle-tab1:checked ~ .frame #tab1 {
  display: block;
}
#toggle-tab2:checked ~ .frame #tab2 {
  display: block;
}
#toggle-tab3:checked ~ .frame #tab3 {
  display: block;
}

<!-- Controls -->
<input name="toggles" type="radio" id="toggle-tab1" checked>
<input name="toggles" type="radio" id="toggle-tab2">
<input name="toggles" type="radio" id="toggle-tab3">

<div class="toggles">

  <!--Tab 1 -->
  <label id="label-tab1" for="toggle-tab1">Hello World 1</label>

  <!--Tab 2 -->
  <label id="label-tab2" for="toggle-tab2">Hello World 2</label>

  <!--Tab 3 -->
  <label id="label-tab3" for="toggle-tab3">Hello World 3</label>

</div>
<div class="frame">
  <div id="tab1">Hello! This is tab1!</div>
  <div id="tab2">Hello! This is tab2!</div>
  <div id="tab3">Hello! This is tab3!</div>
</div>

笔：here

在CSS

2 个答案: