473,699 Members | 2,184 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Hover over an image and insert text

I currently have a page that has 6 images in a row. Using javascript,
when the mouse goes over one of the images, a word is placed below the
images. Each image has a different word. I am trying to change this
to happen through CSS. I think I might be able to use a hover
technique similar to the one used here:

http://css.maxdesign.com.au/listamat...rizontal04.htm

Focusing specifically on this line:

ul#navlist li:hover ul#subnavlist li a:before { content: " >> "; }

I was thinking of something like:

img#image1:hove r p#textarea a:before { content: "some text"; }

Where the image1 is what the mouse needs to be over and the textarea
contains a link that the text needs to be placed before. But for the
life of me I have been unable to get it to work. I think it may have
to do with the heirarchy of elements, but I'm just not sure. Am I on
the right track, or is there a better way to do this?
Jul 20 '05 #1
2 9484
Pamel wrote:
img#image1:hove r p#textarea a:before { content: "some text"; }

Where the image1 is what the mouse needs to be over and the textarea
contains a link that the text needs to be placed before. But for the
life of me I have been unable to get it to work.
IE/Win does not support css generated content. Does that explain
what's wrong?
I think it may have
to do with the heirarchy of elements, but I'm just not sure.


Neither am I, without more information. What browser is this failing
in? What is the url?

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/
Jul 20 '05 #2
"Brian" wrote...
Pamel wrote:
img#image1:hove r p#textarea a:before { content: "some text"; }

Where the image1 is what the mouse needs to be over and the textarea
contains a link that the text needs to be placed before. But for the
life of me I have been unable to get it to work.


IE/Win does not support css generated content. Does that explain
what's wrong?


It doesn't work in either IE or Firebird 0.9. Honestly I didn't expect it to
work in IE, and I really don't care if it does.
I think it may have
to do with the heirarchy of elements, but I'm just not sure.


Neither am I, without more information. What browser is this failing
in? What is the url?


http://commo.de/CSSb0rken/hover/addtext.html

It isn't just the before/content stuff, I can't get any hover effect to affect
anything other than stuff immediately around it.
Pamel


----== Posted via Newsfeed.Com - Unlimited-Uncensored-Secure Usenet News==----
http://www.newsfeed.com The #1 Newsgroup Service in the World! >100,000 Newsgroups
---= 19 East/West-Coast Specialized Servers - Total Privacy via Encryption =---
Jul 20 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
3189
by: Shannon | last post by:
Hi there, I have an HTML page with one large background image in the left corner. I've got various links positioned randomly on the image, and I use <span> tags to display text on another section of the page when hovering over the links. Here's an example of the code: <head> <title>My Title</title> <style type="text/css">
6
17486
by: Nikolaos Giannopoulos | last post by:
If I have simplified html (I have removed height, weight, alt, etc... attributes to simplify the example) such as: <div id="header"> <a href="blah.html"><img src="img/blah.jpg"></a> </div> and the following CSS rule to apply a background color to text links on hover:
3
8222
by: Gnolen | last post by:
Hi, I am wondering if someone could guide me in the right direction about this. How can I make div 'one' hover? Does not need to be clickable/link...It would be easy if the images was not there..But now it is.. <div class="one"><img src="img/someimage.gif" alt="" /><a href="index.php">Text bla bla bla</a></div>
2
3073
by: Elisa | last post by:
I have two images, each with defined CSS hover states. I would like a mouseover on one image to trigger the hover state of the other image. Is this possible using javascript? If so, how? Any help would be appreciated. Thanks, CJ
7
27498
by: fredo | last post by:
I've studied Eric Meyer's pure css popups, version two: http://meyerweb.com/eric/css/edge/popups/demo2.html which pops up an image when I roll over a text link. Now I want to pop up a large image when I roll over a thumbnail. I've tried some things, but can't make it work. See here (Warning: adult matter):
7
17275
by: Cate Archer | last post by:
I want to have a border around an image that changes color when the mouse hovers over it. The following code works perfectly in FireFox but not in Internet Exploiter. The text link changes color but the image link stays the same. Anybody know how I can make it work in IE? I saw a web site where the guy got it to work in both browsers. <html> <head> <title>TEST</title>
1
16237
NevadaSam
by: NevadaSam | last post by:
I want to use a dotted underline when I hover over a text link, but I don't want this to show up when I hover over a image link. Is there a way I can do this without calling a different class when I have an image link? <style type="text/css"> img { background-color:#FFFFFF; border: 1px solid #ff12fc; padding: 5px; margin: 5px 5px 0 0;
8
6547
by: Haines Brown | last post by:
I want a hot text string to display an image only when hovered. In the body: .... <a id="link-a" href="#nogo"> <img id="photo" src="..." />hot text </a> ....
4
2259
by: Sigilaea | last post by:
My previous post got squashed because m post is too long. Sorry for that: I have an AJAX page with a CSS menu at the top. My problem is the hover functionality stops working after someone clicks on one of the details in the main blue section. This only occurs in IE6. IE7 and FF work correctly. The URL to the page is: http://www.coralap.com/dies281css.aspx Steps to reproduce: 1. Mouse over the top menu and verify the hover works. 2....
0
8622
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9184
Oralloy
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
8930
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
7761
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6538
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5878
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4381
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
3061
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
2013
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.