How to fit in an image inside span tag when onclick?


Tags: jquery,html,css

Problem :

I have an image inside a span tag. But the problem is the image doesn't fit inside the span tag. Instead a part of the image goes out of the span tag.

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. I guess something wrong on my code.

How can I achieve it?

MY 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>

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


Solution :

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.

If interpret Question correctly, you can use <input type="checkbox"> with two <label> elements as adjacent siblings, both with for attribute referencing previous <input type="checkbox"> element

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>


    CSS Howto..

    How hide border on embedded swf

    How to use regex to match css elements

    How to use HTC behavior in jQuery CSS for IE?

    How do I add a dropdown menu to my css menu?

    How to make vim alphabetically sort CSS rules within a single line?

    How to make a bullet list align with text in css?

    How to create a pattern overlay on top of an image

    How to Include CSS and JS files via HTTPS when needed?

    How to make equal space between boxes in one row via CSS

    How to remove css files?

    How to position text in a navigation “div.”

    Position relative, how to get rid of dead space?

    Ionic: How to center a div?

    How to select the parent's parent in CSS?

    A plugin or tool to show what elements on a page are effecting other elements?

    how to wrap a text around a image?

    How to give footer background color for the whole width of the browser with fixed parent div

    How to make a sticky footer using CSS?

    How to delete HTML Elements in an iFrame using JavaScript

    How to skew element but keep text normal (unskewed)

    How can I apply a css transition to an element when its parent is hovered?

    Browser sizing Ctrl +/- :: How to manipulate settings?

    Understanding how menus work in html5 and css3

    How to center arrow on post carousel

    How to get similar style as JQuery UI website itself

    How can I change styling and test for every page reload [closed]

    How to align div first left then top in div parent?

    How to force text wrapping with floated elements

    How to create triple div border in CSS

    Symfony3 - how can I add a photo using Symfony