|
CSS - Effects When Hover On A Link
Hello
I would like to make a hover effect when my mouse is over a link, as shown in my attachment. What I want is, as shown in the attachment (at design time), when I hover on any link, two horizontal lines are added at the top and bottom of that specific link, and a slight black transparency appears as well as a highlighter (not the text of the link, and by default the background will be slightly grayed). Anyone can help me with this? Edit: even if the black transparency does not appear is not a problem, but how to implement the two lines? Am using only css and html here, no javascript or any other libraries. Similar TutorialsI'd better admit right off the bat that I'm a total moron at this stuff. Here's the site I'm working on (I apologize for the geocities ads - I don't want to buy hosting until I'm ready to roll with the page). http://www.geocities.com/dbot69/page1.html It does pretty much exactly what I want it to do through firefox, but it's all messed up on internet explorer. Is there any way I can get it to be compatible? I got the css code from this website (it's down but here's the google cache link): http://66.102.7.104/search?q=cache:na1aQDyoijkJ:www.frankmanno.com/ideas/css-imagemap/+CSS+Image+Maps+-+Flickr-like+Technique&hl=en&client=firefox-a then I tailored the code to do what I'm trying to do. But I'm probobly just doing it stupidly seeing as I have no clue what I'm doing. I got the following error when i tried to validate my code: "Line: 21 Parse error - Unrecognized " (it said other stuff, but it wouldn't let me make the post with that other stuff included) I don't really know what that error means though or how to fix it Any help anyone could give me would be greatly appreciated! Thanks! Rob what on hover effects for images CSS alows? for example can i make the image to turn in black and white on hover? or add a border? Hello I'm a photographer trying to code my site myself, I'm a control freak and trying to learn css but coding is not my thing. I have two different rollover effects on my page but only one part is working. The links on the right of photo function correctly when I hover over them, but the links on top don't change as they should. a link to my css file Can anyone help me on this? I believe i have the order correct (a:hover follows link and visited) but i'm sure it's an easy fix. Sadly, not for me. Thanks for any help here is my site: chrisziebarth dot com/test My css file is located in /style.css I need to put tables in my website that I am designing but thought about using css instead. The tables I wanted were similar in design to these ones :http://www.visionman.com in the middle of the page (about 300px down) but I wanted them to change color when the mouse pointer goes over them also. I would appreciate someone showing me how to do this please. Hi - i have forgotten how to assign different link "effects" to different links, so if someone could remind me i would be extreeeeemely greatfull !!! Cheers Jackson Hello, The hover link looks good on IE7 and FF but not on IE6 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>Untitled Document</title>
<style type="text/css">
#header_navigation {
background-color:#0000FF;
position:absolute;
float:left;
font-size:11px;
color:#FFFFFF;
font-weight:bold;
left:190px;
top:130px;
width:145px
}
#header_navigation ul {
border:1px solid #FF0000;
float:left;
list-style-type:none;
margin:0 30px 0 0;
}
#header_navigation li {
width:145px
}
#header_navigation li:hover {
background-color:#FFFFFF;
}
#header_navigation a {
text-decoration:none;
color:#ffffff;
background-color:none;
}
#header_navigation a:hover {
color:#000000;
background-color:#FFFFFF;
width:145px
}
</style>
</head>
<body>
<div id="header_navigation"><!--begin of header_navigation-->
<ul>
<li><a href="index.asp">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Forum</a></li>
<li><a href="blog.asp">Blogs</a></li>
<li><a href="shoutbox.asp">Shoutbox</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Photo Gallery</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</body>
</html>
Not sure what this is referred to. I checked my dhtml book but its from 2000! I want to apply link, visited, hover, active to below code: Code: #print_category {
position: absolute;
left: 35%;
top: 30%;
font-size: 13px;
text-align: left;
line-height: 2 ;
margin-right: 5em;
}
Properties I want to apply: A:link {color: #000099; text-decoration: underline; } A:visited {color: #000099; text-decoration: none; } A:hover {color: #000099; text-decoration: none; } A:active {color: #000099; text-decoration: none; } How can this be done, Ive tried but to no avail: - A#print_category:active {color: #000099; text-decoration: none; } Thanks! I have the following code, but the CSS file that I have already defines link and hover to be something else Is there a way I can edit the div#hdr_cnt to have it's own definition of the hover and link? Thanks for the help Code: div#hdr_ctr { width:100%; min-width:670px; background-color:#FFF; overflow:hidden; margin:0; padding:0; text-align:center; color:#000000}
div#hdr_cnt { background: url('http://www.hobbyspeed.com/header/hobbyspeed.jpg') no-repeat center; width:670px; height:73px; margin:0 auto; padding:0;}
div#hdr_cnt ul.l { float:left; margin:15px 0 0 18px; padding:0; list-style-type:none; direction:rtl; text-align:right; color:#000000}
* html div#hdr_cnt ul.l { margin-left: 9px; color:#000000 }
div#hdr_cnt ul.r { float:right; margin:15px 0 0 20px; padding:0; list-style-type:none; direction:ltr; text-align:left;}
I'm trying to have a hover effect on a link within a <td> tag. In firefox it works fine, but in IE it's not working. I wasn't sure if there's a special property in CSS to get it working. My CSS code is: Quote: .leftblock a{display: block; border-top: 1px solid #ffffff; font-weight: bold; color: #21536A; text-decoration:none; background-color:#CCCCFF; } Quote: .leftblock a:hover{border-top: 1px solid #cccccc; background-color: #DDEEFF; font-weight: bold; text-decoration: none; } I added display:block to the a:hover class as well to try that to no avail. http://www.sassyproducts.com/hover.php is where you can see what I'm working on. If you hover over anywhere on the first link, Fundraising, it adds the hover effect, but the other ones will only show the hover effect if you hover over the text. This is in IE. In FF, it works properly. Any ideas what I may need to add or change?... Thanks. I wish to have links for the menu like this: http://www.tristarwebdesign.co.uk/templates/templates/karma/index.html However, I wish to have MY OWN font style on each links as it can be seen on: The only difference I want is that this guy has used "title" in order to display text on each "li" link, while I would like to use MY OWN font style instead as can be seen from my page on: http://members.lycos.co.uk/darsh25/Personal%20Website/contact.php i.e. the font style that can be seen in links like About, Services, Owner, Template & Contact. Code: <li><a title="link six" href="index.html">link six</a></li> <li><a title="link five" href="index.html">link five</a></li> <li><a title="link four" href="index.html">link four</a></li> <li><a title="link three" href="index.html">link three</a></li> <li><a title="link two" href="index.html">link two</a></li> <li><a title="link one" href="index.html">link one</a></li> My links are saved as an "image" (both background & the text on it) & as far as I'm aware, I couldn't possibly "hover" EACH INDIVIDUAL image of EACH of these links using CSS, could I ??? I know that I could "hover" change the background colour, but then what about the text on it ??? Is it possible to use the same fancy font AND being able to change the background colour when hover to "grey" (just as it could be seen from the "tristar" website. My CSS code so far is: Code: /* CSS Document */
body
{
background-color:black;
background-attachment:fixed;
}
/* .................................... HEADER & FOOTER ................................... */
#header
{
font-family:Georgia, "Times New Roman", Times, serif;
color:white;
text-align:center;
width:100%;
}
#header a
{
color:yellow;
text-decoration:none;
}
#header a:hover
{
text-decoration:underline;
}
#footer
{
font-family:Georgia, "Times New Roman", Times, serif;
color:white;
text-align:center;
border-top:3px solid fuchsia;
float:left;
background-color:black;
width:100%;
}
#footer a
{
color:yellow;
text-decoration:none;
}
#footer a:hover
{
text-decoration:underline;
}
/* ........................................ BANNER ........................................ */
#banner
{
width:100%;
border:none;
text-align:center;
background-color:none;
}
/* ......................................... TOP MENU .................................... */
#topMenu
{
width:100%;
float:right;
border:none;
}
#topMenu ul
{
float:left;
margin-left:4%;
}
#topMenu ul li
{
display:inline;
width:20%;
}
/* ................................... CONTENT ................................................ */
#leftContent
{
float:left;
width:10%;
border:1px solid red;
background-color:green;
}
#centerContent
{
background-color:white;
width:75%;
margin-left:1%;
float:left;
border:1px solid green;
}
#centerContent ul
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
list-style-type:decimal;
color:black;
}
#centerContent li
{
margin:3% 3%;
line-height:1.5em;
}
#rightContent
{
float:right;
background-color:fuchsia;
border:1px solid red;
width:10%;
}
/* ................................... STYLES ......................................... */
p.first-letter:first-letter
{
color:red;
margin-left:5%;
font-size:xx-large;
}
p
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
font-size:medium;
line-height:1.5em;
margin:2% 3%;
color:black;
}
h4
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:center;
font-size:x-large;
color:green;
}
h5
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
font-size:medium;
margin:2% 3%;
color:blue;
}
h6
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
margin:0;
font-size:medium;
font-weight:normal;
color:red;
}
.italic
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
color:black;
font-style:italic;
}
.bold
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
color:black;
font-weight:bold;
}
.colorTextRed
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
color:red;
}
.colorTextBlue
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
color:blue;
}
.colorTextGreen
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
color:green;
}
/* ................................... TABLE ......................................... */
#contactTable
{
background-color:white;
border-spacing:2%;
margin:3% 3%;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:left;
}
#contactTable tr
{
border:none;
}
#contactTable th
{
color:fuchsia;
}
#contactTable td
{
font-size:medium;
color:black;
}
/* ................................... CLASSES ......................................... */
.table
{
background-color:white;
border-spacing:2%;
margin:3% 3%;
font-family:Georgia, "Times New Roman", Times, serif;
border-collapse:collapse;
text-align:left;
}
.tr
{
border:none;
}
.td
{
border:thin solid red;
font-size:medium;
padding:2px;
text-align:center;
color:black;
}
I am attempting to create a link on a page that will only appear when it is hovered upon. This is to direct an administrator to an admin page. Here is what I have attempted so far to no avail: Code: div.headleft {
text-align: right;
width: 100%;
}
div.headleft a:link {
display: none;
}
div.headleft a:visited {
display: none;
}
div.headleft a:hover {
display: block;
background: inherit;
color: #ff0000;
}
div.headleft a:active {
display: none;
}
I have tried a few variations to the above snippet of code and am at my wits end... My gratitude ahead of time... Is it possible to have a link where the user rolls their mouse over it, and an image appears on top of it? I tried setting it as a background image, but it only fills the background of the text. Thanks! My layout contains a vertical navigation bar. It is split up into individual images. I have created a table to organize the sliced images. I am using CSS to create a hover effect. When you mouseover the table cell, the backgroudn changes (and changes back when the mouse is removed.) This is all peachy, but is it possible for me to change the colors of the text within that table cell along with the background. Heres the CSS: Code:
.link_hover1{
background-image: url("images/link_img_01a.jpg");
background-repeat: repeat-n;
cursor: pointer;
width: 170px;
height: 44px;
}
td.link_hover1:visited{
background-image: url("images/link_img_01a.jpg");
background-repeat: repeat-n;
cursor: pointer;
width: 170px;
height: 44px;
}
td.link_hover1:hover{
background-image: url("images/link_img_01b.jpg");
background-repeat: repeat-n;
cursor: pointer;
width: 170px;
height: 44px;
}
td.link_hover1:active{
background-image: url("images/link_img_01a.jpg");
background-repeat: repeat-n;
cursor: pointer;
width: 170px;
height: 44px;
}
I tired implementing the font-color property. No use. does this have something to do with my 'td' selector? I have a feeling that this is the problem. Thanks for taking the time to read my question. I have links on my page that when visited, change color. Simple enough. I also have in my css a hover line that says change the color to white. This works on the unvisited links, but not the visited ones. Why? Here is my css. @charset "iso-8859-1"; .text { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #ffffff } .textCopy { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #CCCCCC; hover: #ffffff } .textbigger { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #CCCCCC; hover: #ffffff } a:hover { color: #ffffff; } a:link { color: #999999; } a:visited { color: #747474; } a:active { color: #CCCCCC; } body { margin-top: 0; background-color: #000000; } You can see this at work at www.pierced.ca Brad Hi, I have a pure css menu that uses hover, Kravitz told me it wont work in touchscreens which I searched for and is so, thanks Kravitz. Also one told me to keep the hover and add a class to make it posible to click on li if hover does not work. Problem, cant test this as I dont have any touchscreen. So 1. is there a way to add a code to disable the hover affect? 2, maybe a website where you can test but using mouse.... 3. Dont remember, its validates but are there anything against using <a href="#">? Thanks, Helen Hi, I have a link and an image next to each other. I want to make the link hovered when I do mouseover on image. How do I do that ? Here is the code I have now. <a href="javascript:undefined" id="imageLinkId">GMNA</a> <script language="javascript"> if( ... ) { document.write('<img src="/graphics/channel/plus.png" id="div18Img" alt="Maximize this section" onMouseOver= >'); } else { document.write('<img src="/graphics/channel/minus.png" id="div18Img" alt="Minimize this section" onMouseOver= >'); } </script> Thanks I have my links, and a:hover does not activate when the link has been visited. Is there any special for a hover visted link or any way to fix this? Whew, it's been a while sin'ce i've been here. Thanks in advance! ~Brendan Hi. Pleeease help! I've created a CSS for a CMS but I'm having a problem with text color. I wanted the links to change from black to white text when hovered over. I seem to have achived this . . . until they have been clicked, and then that function is disabled and they just stay black all the time. I tried deleting cookies and temp internet folders. I tried using the :visited option in the CSS and putting color white in it and that didn't work. Can anyone help? I want a background image on an element that is a specific size where the background changes when hovered and the element functions as a link. I don't want text for the link to be visible. I tried doing this as an a tag but the background is only visible for the height of the text unless I make the text huge and then make it transparent and that doesn't work in IE as the text is still visible I want it to be a specific width and height. It is on the opposite side of a nav bar from my main nav that is a horizontal list so I want is to retail the size of my nav. I don't want the background to be two different images for plain and hover so I was using background placement and moving the bg image on hover. I thought I could then do this as a single li but I have not had success. What is the simplest way to achieve this? I would like to keep the text somehow for accessibility but not have it visible. |
|||||||