如何在onclick时将图像适配到span标签内？

Question

我有一个在标签中的图片。但问题是图片不适合标签中。相反，图片的一部分超出了标签。

我想要实现的效果是：当单击时，更改图片颜色，而当我单击图片时，将更改文本的颜色。我猜我的代码有些错误。

我该如何实现这个功能？

我的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");
}

- Morgan Ng

---

在 CSS 中可以尝试这样写：img { display: inline }。 - Sudharsan S

@SudharsanS 你好，抱歉我在CSS方面还是新手..请问我应该把这个display:inline放在哪里？ - Morgan Ng

当<input>被选中时，可以改变<span>元素的颜色。不确定在没有检查另一个<input>的情况下，是否可以在<label>被选中时更改<span>的颜色。您可以尝试创建两组<input>，<label>配对，并将<label>替换为<span>元素。或者使用<input type="checkbox">元素，当单击时切换checked状态。 - guest271314

Answer 1

我希望当单击单词时，它会更改图像的颜色，而当我单击该图像时，它将更改文本的颜色。如果我正确理解了问题，您可以使用<input type="checkbox">和两个相邻的<label>元素，这两个元素都具有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>

- guest271314