Hover on image using css

Question

justzamir 0 Newbie Poster

11 Years Ago

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>

html-css web-design

3 Contributors
8 Replies
249 Views
4 Hours Discussion Span
Latest Post 11 Years Ago Latest Post by justzamir

pixelsoul 272 Red Pill

11 Years Ago

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.

pixelsoul 272 Red Pill

11 Years Ago

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?

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

justzamir 0 Newbie Poster · Answer 1 · 2013-04-22T16:39:26+00:00

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 :-)

justzamir 0 Newbie Poster · Answer 2 · 2013-04-22T17:05:21+00:00

below is example url,

http://tinyurl.com/cw8cbw4

pixelsoul 272 Red Pill Featured Poster · Answer 3 · 2013-04-22T17:15:45+00:00

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 0 Newbie Poster · Answer 4 · 2013-04-22T17:22:31+00:00

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 59 Newbie Poster · Answer 5 · 2013-04-22T20:11:06+00:00

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 0 Newbie Poster · Answer 6 · 2013-04-22T21:12:31+00:00

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