css - Transform text while the cursor is over an image -

i change list text while mouse on image, list contains items + icons both of them id :

s[i++] = '<li id=\"'+  vizlist[j].name +'\">'; s[i++] =  '<a>'+ vizlist[j].name + '</a>'; s[i++] =  '<img id="img" src="../renderer/bundles/' + vizlist[j].icon + '" width="268" height="120" style="display:block"/>'; s[i++] = '</li>'; 

and css like:

#listlumira li {   display: block ;   background: #4682b4 ;   color: #fff ;   font: 1em "trebuchet ms",arial,sans-serif ;   line-height: 2em ;   text-align: center ;   text-decoration: none ;   padding: 3px 0 ;   margin-top:6px; } #listlumira li a:hover, #navigation li a:focus, #navigation li a:active {   background:   #483d8b ;    letter-spacing: 2px;    text-transform: uppercase;  }  #img  img:hover, #navigation li a:focus, #navigation li a:active {   background:   #483d8b ;    letter-spacing: 2px;    text-transform: uppercase;  } 

my problem in third id call in css... point transform #navigation list while cursor on #img. sorry bad english.

trying css not going work, unless try hack system. css supports :hover child selectors if element child element, not possible in img tags.

you use javascript though.

$('img').on('mouseover', function(){    $('p').css('text-decoration', 'underline');  });    $('img').on('mouseout', function(){    $('p').css('text-decoration', 'none');  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <p>text</p>    <img src="http://placehold.it/200x200">