单击单选按钮时更改背景

Question

我有一个单选按钮，我已经给出了一些风格。

当我点击它时，div背景颜色应该改变。

＆＃13;

＆＃13;

<div>
  <a href="#"></a> <span></span>
</div>
<div><span></span>
  <a href="#"></a>
</div>
<div><b></b>  <span></span>
</div>
<div><b></b>
  <a href="#"></a>
</div>
<div><b></b>  <em></em>
</div>
<div><em></em>
  <a href="#"></a>
</div>

＆＃13;

.no_of_speakers_radio_button {
	margin: 0 auto;
	display: flex;
	padding: 35px 0px;
	text-align: center;
	flex-direction: column;
	border:thin red solid;
	width:100px;
}

.no_of_speakers_radio_button label {
	overflow: hidden;
}

.no_of_speakers_radio_button label span {
	text-align: center;
	font-size: 15px;
	margin: auto;
	display: block;
}

.no_of_speakers_radio_button input {
	position: absolute;
}

.no_of_speakers_radio_button input:checked + span {
	background-color: #ebeff1;
	text-align: center;
}

.no_of_speakers_radio_button input:not(:checked + span) {
	background: transparent;
}

.no_of_speakers_radio_button:hover{
	background: #ebeff1;
}

＆＃13;

＆＃13;

＆＃13;

我想要的是，当点击单选按钮时，整个div背景应该改变而不是仅改变跨度背景。

谢谢。

Answer 1

  

使用纯css，您无法从子项中选择父元素   元件

方法＃01（没有HTML修改）：

在不修改当前HTML结构的情况下，您可以使用:before或:after伪元素来创建虚假的活动状态。

您需要添加以下CSS：

.no_of_speakers_radio_button {
  position: relative;
}
.no_of_speakers_radio_button input:checked + span:before {
  background-color: #ebeff1;
  position: absolute;
  z-index: -1;
  content: '';
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

＆＃13;

＆＃13;

.no_of_speakers_radio_button {
  margin: 0 auto;
  display: flex;
  padding: 35px 0px;
  text-align: center;
  flex-direction: column;
  border:thin red solid;
  position: relative;
  width:100px;
}

.no_of_speakers_radio_button label {
  overflow: hidden;
}

.no_of_speakers_radio_button label span {
  text-align: center;
  font-size: 15px;
  margin: auto;
  display: block;
}

.no_of_speakers_radio_button input {
  position: absolute;
}

.no_of_speakers_radio_button input:checked + span {
  background-color: #ebeff1;
  text-align: center;
}

.no_of_speakers_radio_button input:checked + span:before {
  background-color: #ebeff1;
  position: absolute;
  z-index: -1;
  content: '';
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

.no_of_speakers_radio_button input:not(:checked + span) {
  background: transparent;
}

.no_of_speakers_radio_button:hover{
  background: #ebeff1;
}

＆＃13;

<div class="no_of_speakers_radio_button">
  <label class="four_speakers">
    <input type="radio" name="choose_speaker" class="click">
    <span class="font_size_20">4</span>
    <span class="font_size_17">Speakers</span>
  </label>
</div>

<div class="no_of_speakers_radio_button">
  <label class="eight_speakers">
    <input type="radio" name="choose_speaker" class="click">
    <span class="font_size_20">8</span>
    <span class="font_size_17">Speakers</span>
  </label>
</div>

＆＃13;

＆＃13;

＆＃13;

替代方法（使用HTML修改）：

您可以将HTML修改为以下代码。诀窍是将原始input放在视图之外并放置一个假的input[type="radio"]按钮。

<强> HTML：

<div class="no_of_speakers_radio_button">
  <input type="radio" id="radio1" name="choose_speaker" class="click">
  <label class="four_speakers" for="radio1">
    <div>
      <span class="font_size_20">4</span>
      <span class="fake-radio"></span>
    </div>
    <span class="font_size_17">Speakers</span>
  </label>
</div>

<强> CSS：

.no_of_speakers_radio_button input {
  position: absolute;
  opacity: 0;
  left: -9999px;
  top: -9999px;
}
.no_of_speakers_radio_button label .fake-radio {
  position: relative;
  border: 1px solid black;
  border-radius: 100%;
  height: 12px;
  width: 12px;
}
.no_of_speakers_radio_button label .fake-radio:before {
  background-color: #222;
  border-radius: 100%;
  position: absolute;
  opacity: 0;
  z-index: 10;
  content: '';
  bottom: 2px;
  right: 2px;
  left: 2px;
  top: 2px;
}
.no_of_speakers_radio_button input:checked + label .fake-radio:before {
  opacity: 1;
}

＆＃13;

＆＃13;

.no_of_speakers_radio_button {
  margin: 0 auto;
  border:thin red solid;
  position: relative;
  overflow: hidden;
  width:100px;
}

.no_of_speakers_radio_button label {
  padding: 35px 0px;
  text-align: center;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  display: flex;
  height: 100%;
}

.no_of_speakers_radio_button div span {
  text-align: center;
  font-size: 15px;
  margin: auto;
  display: inline-block;
  vertical-align: middle;
}

.no_of_speakers_radio_button input {
  position: absolute;
  opacity: 0;
  left: -9999px;
  top: -9999px;
}

.no_of_speakers_radio_button label .fake-radio {
  position: relative;
  border: 1px solid black;
  border-radius: 100%;
  height: 12px;
  width: 12px;
}
.no_of_speakers_radio_button label .fake-radio:before {
  background-color: #222;
  border-radius: 100%;
  position: absolute;
  opacity: 0;
  z-index: 10;
  content: '';
  bottom: 2px;
  right: 2px;
  left: 2px;
  top: 2px;
}
.no_of_speakers_radio_button input:checked + label {
  background-color: #ebeff1;
}
.no_of_speakers_radio_button input:checked + label .fake-radio:before {
  opacity: 1;
}
.no_of_speakers_radio_button input:not(:checked + span) {
  background: transparent;
}
.no_of_speakers_radio_button label:hover {
  background: #ebeff1;
}

＆＃13;

<div class="no_of_speakers_radio_button">
  <input type="radio" id="radio1" name="choose_speaker" class="click">
  <label class="four_speakers" for="radio1">
    <div>
      <span class="font_size_20">4</span>
      <span class="fake-radio"></span>
    </div>
    <span class="font_size_17">Speakers</span>
  </label>
</div>

<div class="no_of_speakers_radio_button">
  <input type="radio" id="radio2" name="choose_speaker" class="click">
  <label class="eight_speakers" for="radio2">
    <div>
      <span class="font_size_20">8</span>
      <span class="fake-radio"></span>
    </div>
    <span class="font_size_17">Speakers</span>
  </label>
</div>

<div class="no_of_speakers_radio_button">
  <input type="radio" id="radio3" name="choose_speaker" class="click">
  <label class="eight_speakers" for="radio3">
    <div>
      <span class="font_size_20">8</span>
      <span class="fake-radio"></span>
    </div>
    <span class="font_size_17">Speakers</span>
  </label>
</div>

<div class="no_of_speakers_radio_button">
  <input type="radio" id="radio4" name="choose_speaker" class="click">
  <label class="eight_speakers" for="radio4">
    <div>
      <span class="font_size_20">8</span>
      <span class="fake-radio"></span>
    </div>
    <span class="font_size_17">Speakers</span>
  </label>
</div>

<div class="no_of_speakers_radio_button">
  <input type="radio" id="radio5" name="choose_speaker" class="click">
  <label class="eight_speakers" for="radio5">
    <div>
      <span class="font_size_20">8</span>
      <span class="fake-radio"></span>
    </div>
    <span class="font_size_17">Speakers</span>
  </label>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用JQuery：

$(document).ready(function() {   
   $('.no_of_speakers_radio_button input[type="radio"]').click(function() { 
   $(this).parent().parent().addClass("selected");
  });
});

CSS：

 .no_of_speakers_radio_button.selected {
   background: #ebeff1;
 }

Answer 3

您无法遍历css中的父级，即没有父选择器。

但是，你可以修改你的html结构并设置它的样式，以便在这里实现你想要的。我在这里稍微修改了你的代码：

＆＃13;

＆＃13;

.no_of_speakers_radio_button {
  margin: 0 auto;
  display: flex;
  height: 100px;
  padding: 0;
  text-align: center;
  flex-direction: column;
  border: thin red solid;
  width: 100px;
}
.no_of_speakers_radio_button label {
  overflow: hidden;
  height: 100%;
  display: block;
}
.no_of_speakers_radio_button label span {
  text-align: center;
  font-size: 15px;
  margin: auto;
  display: block;
}
.no_of_speakers_radio_button input {
  position: absolute;
  margin-top: 40px;
}
.no_of_speakers_radio_button input:checked + span {
  background-color: #ebeff1;
  text-align: center;
}
.no_of_speakers_radio_button input:not(:checked + span) {
  background: transparent;
}
.no_of_speakers_radio_button:hover {
  background: #ebeff1;
}
.font_size_20 {
  height: 60px;
  padding-top: 40px;
}

＆＃13;

<div class="no_of_speakers_radio_button">
  <label class="four_speakers">
    <input type="radio" name="choose_speaker" class="click">
    <span class="font_size_20">4 <span>Speakers</span> </span>
  </label>
</div>
<div class="no_of_speakers_radio_button">
  <label class="eight_speakers">
    <input type="radio" name="choose_speaker" class="click">
    <span class="font_size_20">8 <span>Speakers</span></span>
  </label>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

使用css没有点击触发器。但是，您可以使用javascript进行单击功能来切换背景颜色

var radio1 = document.getElementsByClassName("click")[0];
var radio2 = document.getElementsByClassName("click")[1];
	radio1.addEventListener("click",function(){
		radio1.parentNode.parentNode.style.backgroundColor="red";
		radio2.parentNode.parentNode.style.backgroundColor="white";
	})
radio2.addEventListener("click",function(){
		radio2.parentNode.parentNode.style.backgroundColor="red";
		radio1.parentNode.parentNode.style.backgroundColor="white";
	})

.no_of_speakers_radio_button {
			margin: 0 auto;
			display: flex;
			padding: 35px 0px;
			text-align: center;
			flex-direction: column;
			border:thin red solid;
			width:100px;
		}

		.no_of_speakers_radio_button label {
			overflow: hidden;
		}

		.no_of_speakers_radio_button label span {
			text-align: center;
			font-size: 15px;
			margin: auto;
			display: block;
		}

		.no_of_speakers_radio_button input {
			position: absolute;
		}

		.no_of_speakers_radio_button input:checked + span {
			text-align: center;
		}

		.no_of_speakers_radio_button input:not(:checked + span) {
			background: transparent;
		}

		.no_of_speakers_radio_button:hover{
			background: #ebeff1;
		}

<div class="no_of_speakers_radio_button" class="four_speakers">
	<label >
		<input type="radio" name="choose_speaker" class="click" >
		<span class="font_size_20">4</span>
		<span class="font_size_17">Speakers</span>
	</label>
</div>

<div class="no_of_speakers_radio_button">
	<label class="eight_speakers">
		<input type="radio" name="choose_speaker" class="click">
		<span class="font_size_20">8</span>
		<span class="font_size_17">Speakers</span>
	</label>
</div>

Answer 5

给一个单选按钮一个类名，并在该类中放置更改背景