|
CSS - Color Based Hovering - Is This Even Possible?
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. Similar TutorialsI have a Joomla! 1.5 site and I would like to make the colors of a current selection and the hovering text (when I mouse over a link) different colors. Right now they are both set to be white as governed by the following code in my template.css: .navigation .menu-drop > li:hover > a > span, .navigation .menu-drop > .active > a > span, .navigation .menu-drop > #current > a > span, .navigation .menu-drop > .sfHover > a > span { color: #FFFFFF; } What would I need to do to this to make the changes I need? Like is there a spot where I can split this code and add in another color? is there an way of changing the backround of a <tr> using CSS once the user hovers over it? I have a Wordpress site. The layout has some complex elements, but strangely the one thing that doesn't work is the background-color that I am setting using the "body" selector. It works great on Firefox and IE (imagine that!) but not on Safari or Chrome, which are Webkit-based. It is supposed to have a gray background, but those two browsers just show the default white. The following is the code I'm using in the body selector.. not much places where something could be going wrong. css Code: Original - css Code body { margin: 0px; padding: 0px; background-color: #333333; }
The link to the page is he http://montanlaw.com I don't understand why things aren't working... it seems to me like background-color should be a very well-supported property that shouldn't have much variance between browsers. Anyone have any tips? Note: I tried validating the code to see if there was an error there - however, it's all valid except two little (unrelated) things that I could easily fix if I needed to. Thanks in advance for any help, chip19 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 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. . 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. 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? 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 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 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? 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. :[ If 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? Hi guys, Im really hoping I can get some help with this, its driving me nutty. I am trying to code a page that has small 80 by 80 pixel images and when you rollover them I'd like a larger version of the image to appear(say 150px by 150px). I am relatively new at CSS and have been learning by playing around with it myself. Anyways, i just cant seem to get it to work. I have found code to have the rollover image show up as a different image from the original but nothing to change the sizes. One of the other issues is that I cant seem to find a way to do it without the smaller image becoming a link. I cant use Java on the site im doing this on by the way. Ive been roaming the internet looking for a way to accomplish this but havent had any luck thus far. If anyone has any idea how to go about it, or knows of a site that would, please let me know. I have a problem with a site, first mistake i made was i built it to firefox, without testing along the way (please dont hurt me im new to web design) so i found a lot of problems in ie. So i fixed for ie7,8,9 but in 6 i get some two divs from the content area stacked one on the other at the top of the screen but when a link inside the problem div(s) is hovered they go to where they should be. any ideas about that? I am having a minor problem with a photo gallery on a site that I am working on. Here is a link: http://fieldspianos.com/new/store/p...em_number=14275 In all browsers except IE6, when a thumbnail is hovered over, the image is displayed larger in the preview box. In IE6, however, this occurs properly, but once you roll over an image more than once it will not display anymore. For example, if I roll over the 1st thumbnail, the image displays, then I roll over the 2nd thumbnail, the image displays, but if I roll over the 1st thumbnail again, nothing happens. Included below is my css and html. This was made without javascript and I would like to keep it that way if at all possible. HTML Code:
<div id="sitebody">
<div id="tabsheader">
<ul id="primary">
<li><?php print "<a href=\"information.php?item_number=" . $item_number . "\">"; ?>Information</a></li>
<li><?php print "<a href=\"description.php?item_number=" . $item_number . "\">"; ?>Description</a></li>
<li><span>Photo Gallery</span></li>
<li><?php print "<a href=\"video.php?item_number=" . $item_number . "\">"; ?>Video</a></li>
<li><?php print "<a href=\"moreinfo.php?item_number=" . $item_number . "\">"; ?>More Info...</a></li>
</ul>
</div>
<div id="main">
<div id="contents">
<h2>Photo Gallery</h2>
<p class="note">Hover over the photos below to see larger images.</p>
<br />
<div id="photogallery">
<div id="thumbnails">
<ul class="hoverbox">
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img1.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img1.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img2.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img2.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img3.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img3.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img4.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img4.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img5.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img5.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img6.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img6.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img7.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img7.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img8.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img8.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img9.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img9.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img10.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img10.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img11.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img11.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img12.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img12.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img13.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img13.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img14.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img14.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img15.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img15.jpg" alt="description" class="preview" /></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
CSS Code:
/*Photo Gallery*/
div#photogallery {
position: relative;
width: 662px;
border: 1px solid #000;
padding: 1px;
padding-bottom: 2px;
height: 404px;
}
div#thumbnails {
width: 243px;
}
div#thumbnails ul {
margin-left: 0px;
padding-left: 0px;
}
.hoverbox
{
cursor: default;
list-style: none;
}
.hoverbox a
{
cursor: default;
}
.hoverbox a .preview
{
display: none;
}
.hoverbox a:hover .preview
{
display: block;
position: absolute;
top: 2px;
left: 247px;
z-index: 1;
}
.hoverbox img
{
background-color: #FFFFFF;
border-color: #000;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 1px;
vertical-align: top;
width: 75px;
height: 75px;
}
.hoverbox img:hover
{
background-color: #000000;
border-color: #000;
border-style: solid;
border-width: 1px;
color: inherit;
vertical-align: top;
width: 75px;
height: 75px;
}
.hoverbox li
{
display: inline;
float: left;
margin: 1px;
}
.hoverbox .preview
{
border-color: #000;
width: 409px;
height: 399px;
}
Hello again. Or should I say ( Time on my watch is 22:17 and because of time zones (+7 for US) ) good morning ? If go to the: http://www.odin.foxnet.pl/archives.html and expand these 2 menus : Navigation and Other - You will see my problem, and it was working before, now it looks, just like you can see. Second problem: solved And at the ending: Fileds for name and mail for comment wasn't so bad as now. Just look at it (2 eg: http://www.odin.foxnet.pl/2005/09/14/Tales/mj-przyszy-bokken.html http://www.odin.foxnet.pl/2005/09/15/Home/userfriendly-url.html ) Goodnight everyone. You are great people, offering great help. milosz-odin - known from this weigher hi, i am setting up a webstore with php and css and all that. FF is just fine and i love it. IE is a bad bad bad boy and does weird things when hovering over a button, like it makes the background of a certain object disappear ... when you scroll down the page just a little and then hover over the same button it re-appears. please someone tell me that it is not just me going nuts here? if i cannot resolve this issue, i am kinda forced to use tables and all this stuff i do not want to use, because i invested sooooo much time into this ... uh well, here is the url: www.chocolateriewanders.com/store and please - no purchases (yet) .... the whole payment thing is a worry for itself |
|||||||