|
CSS - Highlighting Multiple Elements When Hovering Over A Single Element
I'm making a page with what amounts to footnotes 1 . Some sources may be referenced more 2 than 2 once 2 , and when any of them is hovered over, I'd like all items in the same class to be highlighted 3 , so when i hover over this little number three 3 , I want this next number three 3 and the actual reference down below to all change color.
Is there any to do this without using javascript? (I don't care if it doesn't work in IE6 - I know that has hover issues... 4 ) 1 - Like This! 2 - that one was used 3x 3 - This is red and so are all the little #3's up there 4 - I'm just using Firefox Similar TutorialsIf you have a CSS menu that has drop down menu items and form elements near the top of the page, the menu disappears behind the form elements in IE 6. For an example of what I'm talking about, go he http://www.swingleandassociates.com/catalog/tindex.php?section=c.training.php Hover your mouse over CONDITIONS and you'll see that the menu disappears behind the drop down box. Does anyone know how to fix this? I tried messing with z-index but it didn't seem to work. I may not have done it right thought. Anyone got an answer for that problem? On my site, we use CSS to change the appearance of all form fields, using the following: INPUT { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 13px; color: #484848; background: #EFF4F9; border: 1px solid #484848; padding: 2px; } Unfortunately, I have a single submit button that for various reasons, I want to have looking like the normal, gray, ugly button. Is there some way to turn off the CSS for this single button? Or somehow override the CSS to make it look like a normal button? Like the title says. How do I clear all the <b> elements from the innerHTML of a given element, in this case a <li> element? I am trying to completely wipe all the <b> elements and their content between the two <li></li> elements described in the below code dump. Note that there is a <span> element that I want to keep at the end. Thanks! Code:
<li style="padding-top: 0pt;" id="active_videos" class=""><b style="background-color: rgb(255, 255, 255);" class="rtop"><b style="background-color: rgb(102, 153, 204);" class="r1"></b><b style="background-color: rgb(102, 153, 204);" class="r2"></b><b style="background-color: rgb(102, 153, 204);" class="r3"></b><b style="background-color: rgb(102, 153, 204);" class="r4"></b></b><b style="background-color: rgb(255, 255, 255);" class="rtop"></b><b style="background-color: rgb(255, 255, 255);" class="rtop"></b><b style="background-color: rgb(255, 255, 255);" class="rtop"></b><b style="background-color: rgb(255, 255, 255);" class="rtop"></b><b style="background-color: rgb(255, 255, 255);" class="rtop"></b><b style="background-color: rgb(255, 255, 255);" class="rtop"></b><b style="background-color: rgb(255, 255, 255);" class="rtop"></b><b style="background-color: rgb(255, 255, 255);" class="rtop"></b>
<span id="sp_videos" style="width: 50px; padding-left: 10px; padding-right: 10px;" class=""><a href="#nogo" id="A5" class="" style="cursor: pointer;" onclick="switch_search_videos();">Videos</a></span>
</li>
Can a <form element hold inline elements? For example, Code: <form ... > <input .... /> I'm putting this bare text in this form even if I dunno if it's allowed haha </form> More generally, I know one can NEVER put a block-level element in an inline element. HOWEVER, IS IT ALWAYS possible to put inline elements in block elements ???? Thank you i have a small note that i want to put on the screen, except i want to give it the styles of two different classes. this is what i have used: <span class='smalltext, errornote'>Some text</span> except that only the latter class is actually set, is there a way that i can have both? Ok, I have a really weird problem (don't you love it when people start like that?). I have four elements absolutely positioned inside of a relatively positioned div. As you probably already guessed, everything renders correctly in FF/Moz, but screws up in IE. In the following code, please ignore any validation mistakes, as the real page does validate xhtml 1.0 strict. Code: <div id="outside">
<div id="inside">
<img id="logo" src="logo.png" />
<img id="banner" src="banner.png" />
<img id="topRightCorner" src="topRightCorner.png" />
<img id="bottomLeftCorner" src="bottomLeftCorner.png" />
</div>
</div>
Code: #outside #inside{
position: relative;
top: 0;
left: 0;
/* positioned parent */
}
#outside #inside #logo{
position: absolute;
top: 50px;
left: 50px;
/* logo */
}
#outside #inside #banner{
position: absolute;
top: 60px;
left: 75px;
}
#outside #inside #topRightCorner{
position: absolute;
top: 0;
right: 0;
}
#outside #inside #bottomLeftCorner{
position: absolute;
bottom: 0;
left: 0;
}
The first three position corectly. "bottomLeftCorner" seems to follow its own path, and aligns its self to the bottom of the "outside" div. If I remember correctly, absolute positioning of an element will position it absolutely (duh) in relation to its nearest positioned parent, which in this case is my "inside" div. Here's where it gets quirky (no pun intended) though. When I change the position attribute from "bottom" to "top", the element will gladly position its self wherever I want it, within the "inside" div. Is the "bottom" attribute causing a problem within IE? Am I trying to reference too many child ID's for IE to handle? Am I missing a rule that says the parent has to have the EXACT same atributes as the child? I assume the answer to all three is no, but I thought I'd give it a shot here anyways. Any ideas? Thanks, all! I took an example from w3.org (shown below) and it doesn't work. From http://www.w3.org/TR/css3-content/ Quote: 4.2.2. Inserting multiple '::before' and '::after' pseudo-elements In contrast with the previous section, the selector '::before(2)' represents a pseudo-element before another, both of which are contained at the start of an element. For example, the following rules: div { content: 'A' } div::before { content: 'B'; } div::before(2) { content: 'C'; } ...would result in the following rendering objects: ,-----------------------. | ,---. ,---. | | | C | | B | A | | `---' `---' | `-----------------------' The '::before' selector is exactly equivalent to '::before(1)'. A pseudo-element only exists if all the elements and pseudo-elements leading up to it exist. For instance, in the following example, only one pseudo-element is generated, the first one: div { content: 'A' } div::before { content: 'B'; } div::before(2) { content: inhibit; } div::before(3) { content: 'C'; } It would result in the following rendering objects: ,-----------------------. | ,---. | | | B | A | | `---' | `-----------------------' So my code is Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Page</title>
<style type="text/css" media="screen">
div { content: 'A' }
div::before { content: 'B'; }
div::before(2) { content: 'C'; }
</style>
</head>
<body>
<div>Test Div</div>
</body>
</html>
And the output is "BTest Div". Firefox error console comes up with Quote: Warning: Function token for non-function pseudo-class or pseudo-element, or the other way around, when reading 'before'. Ruleset ignored due to bad selector. Line: 10 I get a similar error when I validate it with W3.org using CSS level 3 Quote: 10 div Parse Error div::before(2) { content: 'C'; } I just find it odd because I copied the example off of their site and then when I validate it the code comes back as invalid. Any ideas? Hello everyone, l just wanted to know what browsers support the following: Code: <style>
td.test1 {
background-color: pink;
}
td.test2{
border-style: dotted;
border-width: 10;
border-color: orange;
}
</style>
<table>
<tr><td class="test2 test1">
THIS IS A TEST .. YAYA!!
</table>
Which is 1 element, with 2 class names... It seems to work with the latest netscape, IE, and opera, just wanted to know if this is something l should be using on my web pages, or not due to the possible compatibility issues, any help is greatly appreciated, gents Samantha Gram. Can someone tell me how z-index calculated on two elements that are both absolute position I have the navigation set so that the background turns green on the current page. When you hover over the other links they turn green. However, I do not want the active link to change colors when it is hovered over. How do I stop this from happening? http://brittanyrubinstein . com/fulcrum/index.html A thousand apologies -- this is a very poorly worded and general question, because I've learned through scavenging and don't know the jargon, and the answer might not even lie in CSS... but the problem is really driving me to distraction. Is it possible in CSS to define a hover effect such that upon hovering over one element, a different element is affected? For example, I know you can add something like this: #example a:hover{ color: #000000; } in order to change the color of any links in the example div upon hovering. But can you change properties of links in any other divs? If so, then how? And if not, then is there a different language which can effect this change? Again, a thousand apologies for the amateurishness and outsider-wording of this question. I will be happy to clarify on request to the extent of my ability. We recently decided to alphabetize the Specialties on our web pages (using the .php files from the Includes folder). I have re-alphabetized them in both the .php file as well as the default.css file including making the first image coincide with the alphabetized list. However, when I do, the original image (for Hospitality) remains as the default image and only changes when you finally hover over Hospitality or anything below it. Here's the way part of the original file is set up: /* Images */ div#specialties ul li a.hospitality span.img { position: absolute; top: 0; right: 0; width: 222px; height: 190px; background-image: url(../images/hospitality.jpg); background-repeat: no-repeat; z-index: 0; } div#specialties ul li a.hospitality:hover span.img { position: absolute; top: 0; right: 0; width: 222px; height: 190px; background-image: url(../images/hospitality.jpg); background-repeat: no-repeat; z-index: 0; } And here's what I changed it to: /* Images */ div#specialties ul li a.apartments span.img { position: absolute; top: 0; right: 0; width: 222px; height: 190px; background-image: url(../images/apartments.jpg); background-repeat: no-repeat; z-index: 0; } div#specialties ul li a.apts:hover span.img { position: absolute; top: 0; right: 0; width: 222px; height: 190px; background-image: url(../images/apartments.jpg); background-repeat: no-repeat; z-index: 0; } Help! You can check out the current look at Connell Insurance dot com. . Hi, My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner). Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page. I have tried various approaches and read up on positioning but so far have not been able to do it using css. Any help is much appreciated. Jim If anyone can help me with this, I will owe my life, because I'm in over my head with a project for my electronic media class and I'm not good enough with CSS. I need to make divs appear when I hover over images. The images aren't links, just anchors. I have a long page with a ton of images, and I need divs (with tables inside) to appear when I hover over those images. Also, if possible.. I'd like the appearing divs to move relative to the browser, but if not, I'll settle for absolute. It must be so simple, but I'm waaay too stressed to get this to work. :[ I am trying to create something similar to tooltips and having a problem. I know that the browsers support tooltips with the title attribute but I'm looking to do something different. Also, I know that IE has bugs with hovering on non-anchor tags but I'm trying to make this work in a standards-compliant browser (I'm not using IE). I've tried the code given by SantaKlauss and it worked fine. But why doesn't this work (a simple example to illustrate the problem)? Code:
<style type="text/css">
.test:hover + div
{
background-color: red;
}
</style>
<img class='test' src='test.gif' />
<div>here is some text</div>
If I remove the :hover pseudo-class declaration like this: Code:
.test + div
{
background-color: red;
}
It correctly sets the background color on the div following the image. So why doesn't the first example work with the hover pseudo-class?? Thanks in advance, Jeremiah Hi all, I am having an issue with IE7. www[dot]novakwebsales[dot]com/help/index6.html When you hover over the top category tabs, it shifts the footer up. Then if you hover over the subcategory tabs on the left it drops down again??? It works fine in Firefox... Any ideas? Thanks in advance, Tbone When hovering over a link, how can I make the underline thicker? Check out this site. link I just changed my website layout from just tables to CSS but theres a few problems, nested tables dont stop at the border of the containing table they hover over them, and one of the tables that was meant to be another column moved out of the table altogether heres the site before and after i edited it: Before After I was told to divide it up like this Code: <body> <div id="wrapper"> <div id="header">Header</div> <div id="body"> <div id="nav">Nav</div> <div id="content">Content</div> </div> <div id="footer">Footer</div> </div> </body> Can anyone see what the problem is? I was asked by one of my friends if this was possible, and I didn't think it was but figured I'd ask here just in case... With image maps, you can have parts of an image link to different pages based on coordinates.... I wanted to know if there was a way to link to different pages based on colors on an image. Doesn't necessarily have to be done in CSS... just looking in general as to if this is possible, and what would be the best approach. Thanks. I'm not sure if this is an HTML problem or a CSS problem, but since it seems to be a display issue, I'll start here. I have an annoying minor display issue on my site , the solution to which has alluded me for some time. The pop up menues are created using CSS specificity but I'm thinking that has no bearing on the issue because the menues aren't the only place the problem occurs. In a number of places, I have implemented mouseover effects using the :hover pseudo-(class/element). In instances where the hovered content requires more screen space (to add a border or text decoration, etc) the whole page gets shifted a pixel or two (however much it takes to add the effect). I've tried adding transparent borders around the static images and increasing line height around text, but to no avail. Any suggestions? |
|||||||