title: How to change an image color once on click using CSS alone?
body: <p>I have an image and when the <code>li</code> on <code>span</code> being selected I want to change the color of image same as the word below it. </p>
  
  <p><strong>I am looking for a simple CSS only solution.</strong></p>
  
  <p>Is that possible?</p>
  
  <p><strong>HTML:</strong> </p>
  
  <pre><code>&lt;div class="games-panes fr"&gt;
  &lt;!-- PT游戏厅 --&gt;
  &lt;div class="games-platform-item pt-item"&gt;
  &lt;ul class="games-sub-menu clearfix"&gt;
      &lt;li class="tab1 current"&gt;
          &lt;img src="../images/abc11.jpg"/ class="topimgG1" "&gt;
          &lt;span&gt;编辑精选&lt;/span&gt;
      &lt;/li&gt;
      &lt;li class="tab2"&gt;
          &lt;img src="../images/abc2.jpg"/ class="topimgG2" "&gt;
          &lt;span&gt;老虎机&lt;/span&gt;
      &lt;/li&gt;
      &lt;li class="tab3"&gt;
          &lt;img src="../images/abc3.jpg"/ class="topimgG3" "&gt;
          &lt;span&gt;桌面游戏&lt;/span&gt;
      &lt;/li&gt;
      &lt;li class="tab4"&gt;
          &lt;img src="../images/abc4.jpg"/ class="topimgG4" "&gt;
          &lt;span&gt;累计大奖&lt;/span&gt;
      &lt;/li&gt;
      &lt;li class="tab5"&gt;
          &lt;img src="../images/abc5.jpg"/ class="topimgG5" "&gt;
          &lt;span&gt;小游戏&lt;/span&gt;
      &lt;/li&gt;
      &lt;li class="tab6"&gt;
          &lt;img src="../images/abc6.jpg"/ class="topimgG6" "&gt;  
          &lt;span&gt;视频扑克&lt;/span&gt;
      &lt;/li&gt;
      &lt;li class="tab7"&gt;
          &lt;img src="../images/abc7.jpg"/ class="topimgG7" "&gt;
          &lt;span&gt;所有游戏&lt;/span&gt;
      &lt;/li&gt;
      &lt;li class="tab8 games-pt-search" style="display:none;"&gt;&lt;span&gt;搜索结果&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="search-wrap clearfix"&gt;&lt;input type="text" id="pt-keyword" placeholder="PT游戏搜索" /&gt;&lt;a href="javascript:void(0);" onclick="pt_search();"&gt;&lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.games-sub-menu li {
      float: left;
      display: inline;
      cursor: pointer;
      height: 20px;
      line-height: 50px;
      padding: 0 38px;
      margin: 24px 0;
      border-right: 1px solid #f1f1f1;
      font-size: 14px;
      color: #838383;
      transition: all 0.25s ease-in 0s;
  }
  .mg-item .games-sub-menu li {
      padding: 0 12px;
      font-size: 13px;
  }
  .bb-item .games-sub-menu li {
      padding: 0 23px;
  }
  .games-sub-menu li:hover,
  .games-sub-menu li.current {
      color: #3385ff;
  }
  </code></pre>
  
  <p>IMAGE being selected : </p>
  
  <p><a href="https://i.stack.imgur.com/3tNAa.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3tNAa.jpg" alt="enter image description here"></a></p>