Hover on image using css

[justzamir]

Hi,

Well i am totally new to css and html,

i am making a table with css, need to show hover on image and text, hover is showing correctly on text, but on image its not working, below is my html and css.

<style type="text/css"><!--
#list4 { font-family:"Comic Sans MS", cursive font-size:11px; } #list4 ul { list-style-image: url(http://cdn1.iconfinder.com/data/icons/oxygen/16x16/actions/media-playback-start.png); } #list4 ul li { } #list4 ul li a { display:block; text-decoration:none; color:#000000; background-color:#FFFFFF; line-height:20px; border-bottom-style:solid; border-bottom-width:0px; border-bottom-color:#CCCCCC; padding-left:10px; cursor:pointer; } #list4 ul li a:hover { color:#FFFFFF; background-color:#FF9933; } #list4 ul li a strong { margin-right:10px; }
--></style>
<table style="table-layout: fixed; width: 100%;" >
<tbody>
<tr>
<th colspan="2"><img class="aligncenter" alt="" src="http://t3.gstatic.com/images?q=tbn:ANd9GcSRQPDC-vE-opE5k0q_lTYRtLVOQdkaN5hmk3v3IyIxJs7Azj9G" width="77" height="77" /></th>
</tr>
<tr>
<td>
<div id="list4">
<ul>
    <li><a href="#"><strong>Some Text</strong></a></li>
    <li><a href="#"><strong> Some Text </strong></a></li>
    <li><a href="#"><strong> Some Text </strong></a></li>
    <li><a href="#"><strong> Some Text </strong></a></li>
    <li><a href="#"><strong>Some Text</strong></a></li>
</ul>
</div></td>
<td>
<div id="list4">

</div></td>
</tr>
</tbody>
</table>

[pixelsoul]

I saw font-family:"Comic Sans MS" and I got sad...

What exactly is it that is supposed to happen when you hover the image? You don't have any CSS for a hover state on the image.

[justzamir]

yes its not in above code, i haver removed that, bcoz i was unable to achive what i want, i want same as on text, and sorry for font :-)

[pixelsoul]

I would probably start by adding a class or id to the image so you can select it properly from the CSS, unless you want to just use img as the selector, but that will select ALL images on the page. Beyond that, I am not sure what type of affect you are trying to achieve. Different cursor? Background color?

[justzamir]

below is example url,

http://tinyurl.com/cw8cbw4

[pixelsoul]

Hmm, I don't really see any hover affects on those. They are just images that have been turned into links. The only CSS that I see affecting them is some to remove the border on them.

For example
http://jsfiddle.net/pixelsoul/xsfch/

[justzamir]

Hope this will help you to understand bit more, may be you call it li background color change.

<style type="text/css"><!--
.test td{background-color:#FFFFFF;}
.test td:hover{background-color:#ff99cc;}
--></style>
<table class="test">
<tr>
<td><a href="hello.aspx"><img src="http://cdn1.iconfinder.com/data/icons/oxygen/16x16/actions/media-playback-start.png" width="15" height="15"> hello"</a></td>
</tr>
</table>

[paulkd]

justzamir, pixelsoul's question was

What exactly is it that is supposed to happen when you hover the image

Do you want a different image to appear instead of the panda?

[justzamir]

i have achived, what i was looking for. Thanks for help