我在 span 标签中有一张图片。但问题是图像不适合 span 标签。相反,图像的一部分超出了 span 标签。
我希望当点击单词 span 时它会改变图像颜色,而当我点击该图像时它会改变文本的颜色。我猜我的代码有问题。
我怎样才能实现它?
我的 HTML :
<div class="games-platform-item pt-item">
<ul class="games-sub-menu clearfix">
<li class="tab1 current">
<!-- <img src="../images/abc11.jpg"/ class="topimgG1" "> -->
<input type="radio" name="imgSwap" id="rdoImg1">
<label class="topimgG1" for="rdoImg1"></label>
<span>编辑精选</span>
</li>
<li class="tab2">
<div>
<!-- <img src="../images/abc2.jpg"/ class="topimgG2" "> -->
<input type="radio" name="imgSwap" id="rdoImg2">
<label class="topimgG2" for="rdoImg2"></label>
<span>老虎机</span>
</div>
</li>
<li class="tab3">
<!-- <img src="../images/abc3.jpg"/ class="topimgG3" "> -->
<input type="radio" name="imgSwap" id="rdoImg3">
<label class="topimgG3" for="rdoImg3"></label>
<span>桌面游戏</span>
</li>
<li class="tab4">
<!-- <img src="../images/abc4.jpg"/ class="topimgG4" "> -->
<input type="radio" name="imgSwap" id="rdoImg4">
<label class="topimgG4" for="rdoImg4"></label>
<span>累计大奖</span>
</li>
<li class="tab5">
<!-- <img src="../images/abc5.jpg"/ class="topimgG5" "> -->
<input type="radio" name="imgSwap" id="rdoImg5">
<label class="topimgG5" for="rdoImg5"></label>
<span>小游戏</span>
</li>
<li class="tab6">
<!-- <img src="../images/abc6.jpg"/ class="topimgG6" "> -->
<input type="radio" name="imgSwap" id="rdoImg6">
<label class="topimgG6" for="rdoImg6"></label>
<span>视频扑克</span>
</li>
<li class="tab7">
<!-- <img src="../images/abc7.jpg"/ class="topimgG7" "> -->
<input type="radio" name="imgSwap" id="rdoImg7">
<label class="topimgG7" for="rdoImg7"></label>
<span>所有游戏</span>
</li>
我的CSS:
/*Hide the Radio Button*/
.games-sub-menu input[type=radio] {
display: none
}
/*Set a box for the label, this is what is clicked on*/
.games-sub-menu label {
display: block;
width: 150px;
height: 100px;
}
/*Set Images...this would work better with sprites*/
.games-sub-menu label.topimgG1 {
background-image: url("../images/abc1.jpg");
background-repeat: no-repeat;
width: 80px;
height: 40px;
right: 820px;
top: 0px;
position: absolute;
z-index: 999;
}
.games-sub-menu input[type=radio]:checked + label.topimgG1 {
background-image: url("../images/abc1_onclick.jpg");
}
.games-sub-menu label.topimgG2 {
background-image: url("../images/abc2.jpg");
background-repeat: no-repeat;
width: 80px;
height: 40px;
right: 690px;
top: 0px;
position: absolute;
z-index: 999;
}
.games-sub-menu input[type=radio]:checked + label.topimgG2 {
background-image: url("../images/abc2_onclick.jpg");
}
.games-sub-menu label.topimgG3 {
background-image: url("../images/abc3.jpg");
background-repeat: no-repeat;
width: 80px;
height: 40px;
right: 560px;
top: 0px;
position: absolute;
z-index: 999;
clear: both;
}
.games-sub-menu input[type=radio]:checked + label.topimgG3 {
background-image: url("../images/abc3_onclick.jpg");
}
.games-sub-menu label.topimgG4 {
background-image: url("../images/abc4.jpg");
background-repeat: no-repeat;
width: 80px;
height: 40px;
right: 430px;
top: 0px;
position: absolute;
z-index: 999;
}
.games-sub-menu input[type=radio]:checked + label.topimgG4 {
background-image: url("../images/abc4_onclick.jpg");
}
.games-sub-menu label.topimgG5 {
background-image: url("../images/abc5.jpg");
background-repeat: no-repeat;
width: 80px;
height: 40px;
right: 305px;
top: 0px;
position: absolute;
z-index: 999;
}
.games-sub-menu input[type=radio]:checked + label.topimgG5 {
background-image: url("../images/abc5_onclick.jpg");
}
.games-sub-menu label.topimgG6 {
background-image: url("../images/abc6.jpg");
background-repeat: no-repeat;
width: 80px;
height: 40px;
right: 18 5px;
top: 0px;
position: absolute;
z-index: 999;
}
.games-sub-menu input[type=radio]:checked + label.topimgG6 {
background-image: url("../images/abc6_onclick.jpg");
}
.games-sub-menu label.topimgG7 {
background-image: url("../images/abc7.jpg");
background-repeat: no-repeat;
width: 80px;
height: 40px;
right: 43px;
top: 5px;
position: absolute;
z-index: 999;
}
.games-sub-menu input[type=radio]:checked + label.topimgG7 {
background-image: url("../images/abc7_onclick.jpg");
}
最佳答案
I want to have when onclick on the word span it change the image color while when i onclick on that image it will change the color of the text.
如果正确解释问题,您可以使用 <input type="checkbox">
有两个<label>
元素作为相邻的 sibling ,都带有 for
引用先前的属性 <input type="checkbox">
元素
input {
display: none;
}
label {
width: 50px;
height: 30px;
background: blue;
display: block;
}
:checked + label + label {
background: red;
color: white;
}
:checked + label {
background: green;
}
<input type="checkbox" id="1">
<label for="1"></label>
<label for="1">text</label>
关于jquery - onclick时如何将图像放入span标签内?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39566650/