How to posibal image hover effect another image ?

Expand|Select|Wrap|Line Numbers

 <!DOCTYPE html>

<html>

<head>

<style type="text/css"> 

div

{
 
background:url(banner.jpg);

transition:width 2s;

-moz-transition:width 2s; /* Firefox 4 */

-webkit-transition:width 2s; /* Safari and Chrome */

-o-transition:width 2s; /* Opera */
 
}
 
div:hover

{

background:url(banner.jpg);

}
 
</style>

</head>

<body>
 
<div></div>
 
</body>

</html>

Aug 5 '12 #1

Subscribe Post Reply

2312

ariful alam

185

100+

R you trying to create a background image change on hover? if yes then your writings has a little error. you used same image in div and div:hover css settings. you should use different image for div and div:hover css settings. moreover your div css settings has no width and height settings. so the div will not have a sized defined to show the background image in browser. you should use a width and a height for the div.

here is the changed code:

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE html>

<html>

<head>

<style type="text/css"> 

div

{

   width:500px;

   height:150px;

   background:url(banner1.jpg);
 
   transition:width 2s;

   -moz-transition:width 2s; /* Firefox 4 */

   -webkit-transition:width 2s; /* Safari and Chrome */

   -o-transition:width 2s; /* Opera */

}
 
div:hover

{

   background:url(banner2.jpg);

}

</style>

</head>

<body>
 
<div></div>

</body>

</html>

Aug 5 '12 #2

sharmahemal

now in hover to add unorder list also?can it possibal?

Aug 6 '12 #3

ariful alam

185

100+

@sharmahemal:

sorry, don't get what about you are asking. can you explain please.

Aug 6 '12 #4

sharmahemal

Expand|Select|Wrap|Line Numbers

 div:hover

{

   background:url(banner2.jpg);

<ul>

<li>fgg</li>

<li>fgg</li>

<li>fgg</li>

</ul>

}

can it possibal? so please give me some refrence

Aug 6 '12 #5

ariful alam

185

100+

you are trying to add HTML tags on hover. that's not possible.

but you can do this kind of works using JavaScript like some hidden div can be shown by hovering on some other div.

Aug 6 '12 #6

ariful alam

185

100+

you are trying to add HTML tags on hover. that's not possible.

but you can do this kind of works using JavaScript like some hidden div can be shown by hovering on some other div.

Aug 6 '12 #7

by: Laszlo Zsolt Nagy | last post by:

I would like to load image from a directory right into an image list. I wrote a simple library that loads the images in the directory and resizes them as needed before adding to the wx.ImageList....

Python

Hover effect for non-anchor tags

by: CJM | last post by:

Is it possible to achieve a hover effect for a non-anchor tag in CSS? I can use the following code, but it goes against the grain: <a href="" onclick="return false;">Label</a> Surely there...

HTML / CSS

Can you have a hover effect on a TD in IE?

by: madsgormlarsen | last post by:

I can not get hover effect on a TD to work in IE, it seams you can not have a hover on a td in IE? I have treid this body.section-2 td.current, body.section-2 td.submenu, body.section-2...

HTML / CSS

list item (li) hover effect in IE

by: windandwaves | last post by:

Hi Folk Just a bit of help here for newbies who want their menus to look nicer. I am sure that many of you make menus like this <ul id="menu"> <li><a href="page1.html">option 1</a></li>...

Javascript

Hover effect in Calender Control

by: jack | last post by:

Hi im making a scheduler, in house project in which im using a calender control. in this is possible to ger an hover effect (or a color change ) of a cell which i do mouse over on this control . ...

ASP.NET

Hover effect of Asp Dotnet Buttons

by: jack | last post by:

Hi.. aaa... i tried a lot btu couldnt find on net, Im trying to get the hover effect of the web button . but dont know how to get this .. Please help Thanks Awaiting for the answer..

ASP.NET

nice hover-effect for images

by: tomasio | last post by:

Dear Pros, How can I achieve a nicer hover-effect for the image tomasio.design on the bottom-right of my webpage? I am using the class ".footer a:hover" for a CSS-based mouseover-effect but this...

HTML / CSS

achieve a nicer hover-effect for images

by: tomasio | last post by:

Dear Pros, How can I achieve a nicer hover-effect for the image "tomasio.design" on the bottom-right of my webpage? I am using the class ".footer a:hover" for a CSS-based mouseover-effect but...

HTML / CSS

Background image with CSS on Hover effect

by: rupak | last post by:

I have an mouseover effect with css on hover, which change the image on hover through Css. It works with IE fine but have problem with Mozilla, as the background image not coming full on hover. If...

HTML / CSS

hover effect in IE6

by: romepatel | last post by:

I am using <div class="abc"> and I have abc:hover{ } in my style.css file, The hover effect don't work in IE 6. Though it works fine in IE 7 and firefox.

HTML / CSS

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

How to posibal image hover effect another image ?

Similar topics