i have a problem, i'm working on a gallery php script and need help, i have a picture, it has a lightgray border around, and if theres a mouseover event, i want the border to turn gray. how can i do that?
thanks in advance
Use the :hover pseudo class. For example:
<html>
<head>
<style>
IMG.HoverBorder {border:5px solid #eee;}
IMG.HoverBorder:hover {border:5px solid #555;}
</style>
</head>
<body>
<img class="HoverBorder" src="test.png" />
</body>
</html>
The above code works well on all sane browsers I have access to. If you need IE 6 support, take a deep breath and check this out (thanks to #Brian Kim for reminding me about IE6):
<html>
<head>
<style>
a:hover{ background-color:white; }
a:link img, a:visited img{ border:5px solid #eee; }
a:hover img{ border:5px solid #555; }
</style>
</head>
<body>
<img class="HoverBorder" src="03 messed up status log edit IE6.png" />
</body>
</html>
There are several variants on this approach--I suggest you click through to that site for other options that might be more suitable to your situation.
You can use the :hover pseudo-class.
For example:
<style>
a.bordered:hover img {
border: solid 2px grey;
}
</style>
<img src="..." />
use .mypictureclass:hover to apply the border.
but also apply a transparent border to the picture display class to avoid it jumping when the border is added.
okay dudes i've got it XD as i said, i'm a html guy, and i just found out how it works, it used a CSS as style, so i tried much things, and, surprise, i just made a copy of the imagethumbnail-tag and changed the bordercoler and edited the title to imagethumbnail:hover
thank y'all as well :)
<style type="text/css">
body,td,th {
font-size: 14px;
color: #FFF;
}
body {
background-color: #000;
}
a {
font-size: 14px;
color: #FFF;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
text-decoration: none;
color: #CCC;
}
a:active {
text-decoration: none;
color: #FC3;
}
a:img,
a:link img,
a:visited img,
a:focus img,
a:hover img,
a:active img {
border: none;
}
</style>
The code follows everything I've seen so far, but still isn't displayed in IE correctly & shows borders around the images. This is a sample of one of the mouseover images.
<a href="index.html">
<img src="images/buttons/home.png" alt="Home" width="216" height="44"
onmouseover="this.src='images/buttons/home_.png'" onmouseout="this.src='images/buttons/home.png'"></a>
Related
So I am trying to make a dog shelter website, and I was wondering if there was a way to make both the image and the text act as one, without turning it into a table. For example, when I hover over the image the text will change still colour, as if I were hovering over the text. I am very new to HTML so it may be something very simple. Thanks.
<html>
<body>
<style>
a:link {
color: black;
}
a:visited {
color: black;
}
a:hover {
color: #327da8;
}
.name {font-size:20px; font-color:black; font-family:montserrat; text-decoration:none; position:absolute; margin-top: 360px; text-align:left; border-width:1px; border-style:solid; border-color:lightgray; padding: 27.5px; border-radius:0px 0px 15px 15px;
}
a img {
border-radius: 50%;
display: block;
border: none;
}
</style>
<img style="position:absolute; margin-top:60px; margin-left:50px; border-radius:15px 15px 0px 0px;" src="https://i.pinimg.com/originals/2d/6f/8e/2d6f8ef1a4c976ce5e2a9eea5980ec92.jpg" height="300" width="200">
<a class="name" style="margin-left:50px;" href="file:///C:/Users/del0044/OneDrive/HTML%20Coding/PupLove/PupLoveLana.html">Nala <br><br> Breed: Golden <br> Retriever <br><br> Sex: Female</a>
</html>
</body>
This is the code
Use general sibling selector (~) selects all elements that are next siblings of a specified element.
in your case it should be :
a:hover ~ .name { color: #327da8; }
You can put your image and text into the same div, and give it a class name.
Then apply your CSS on that class as well as class:hover.
Example:
.image_and_text_div{
color: black;
// rest of your css property
}
.image_and_text_div:hover{
color: red // it will change only text color if you hover over the image or the text
// Or you can even directly apply CSS on the text like below
h4{
color; red//
}
}
<div class="image_and_text_div"><img hre="your image url/src" /> <h4>Puppy</h4> </div>"
I'm new to HTML and CCS. I would like to have an invisible link but I don't want to set the style of 'a' tags directly, instead I would like to set the style of its parent element so that it becomes invisible.
This is what I tried:
div {
color: white;
border: none;
}
a {
color: inherit;
border: inherit;
}
a:link {
text-decoration: none;
}
<html>
<body>
<div><a href='/trap'> inherit </a></div>
</body>
</html>
It doesn't show the text inside the 'a' tag, but it still shows a box around it, how I can get rid of that box?
I guess you are talking about the outline box.
You can remove it with:
div{
color: white;
border: none;
}
a, a:focus{
color: inherit;
border: inherit;
outline:none;
}
a:link{
text-decoration: none;
}
<html>
<body>
<div><a href='/trap'> inherit </a></div>
</body>
</html>
You should add this CSS property to hide the outline in all your link elements :
a, a:focus {outline : none;}
In the other hand, if you want to make an element invisible, but still be able to receive click interactions on it, you can play with the opacity CSS property (setting the font color to white is not an elegant solution)
a{ opacity:0; }
The 'box' around your link has a default outline property defined. Be sure to include outline: none; to any element or pseudo-selector that includes this treatment.
div {
color: #ccc; /* for testing purposes*/
border: none;
}
a {
color: inherit;
border: inherit;
}
a:link {
outline: none; /* removes outline */
text-decoration: none;
}
<html>
<body>
<div><a href='#trap'> inherit </a></div>
</body>
</html>
a:focus {
outline: none;
}
Is that what you are looking for?
I'm a bit confused why you are trying to make a link that is invisible in the first place, but the box you are referring to is most likely the focus box. Typically used to make it easy for the user to know what they are selecting and is good for accessibility-- it's usually not recommended to remove.
You can though by adding the code below.
a:focus {
outline: none;
}
I have the following code and I still see the border under an image. Any idea?
a, a:visited {
color: #000000;
border-bottom: 2px solid black;
padding-bottom: 2px;
text-decoration: none;
}
img {
border: 0;
}
Maybe I should add that I'm working locally...
Code Example: http://jsfiddle.net/8WzMJ/
You put an image inside anchor and give border bottom to anchor, to remove that, remove border from the anchor
a,
a:visited {
color: #000000;
padding-bottom: 2px;
text-decoration: none;
}
or add class to anchor and style it without border
<a class="without-border" href="http://www.seobook.com/images/smallfish.jpg">
<img src="http://www.seobook.com/images/smallfish.jpg" />
</a>
.without-border {
border: none;
}
Without seeing your code, I don't know what the impact of this might be, but you could try:
img{
float:left;
padding-bottom:2px;
}
I have added a Image as a link on my MVC4 website and when i hover over the image a nasty grey highlight appears, is there a way to remove it?
Here is my code below:
<div class="float-left">
<p>
<a href="#Url.Action('Index')">
<img alt="HomePage" style="verticalalign:middle;" height="30px" src="~/Images/formvalue_logo.png">
</a>
</p>
</div>
Thanks in advance.
Try -
.float-left img:hover, .float-left a:hover{
background: none;
background-color: transparent;
}
a img, a img:hover { background-image: none; background-color: transparent; }
might fix your problem... if not, try:
a:hover img, a img:hover { background-image: none; background-color: transparent; }
If that doesn't do the trick, then the background is on the 'a' tag rather than the image, and you'll need to do this:
a { background-image: none; background-color: transparent; }
although this will affect every link on the page, so it might be better to put a class on the link (e.g. myClass), and style using that:
a.myClass, a.myClass img, a.myClass img:hover { background-image: none; background-colour: transparent; }
Hi I am trying to have different color links on the same page. I want some links to be blue and some links to be black. I am new to html and CSS so thank you in advance!
-Spencer
CSS:
a.class1 {color:red;}
a.class1:link {text-decoration: none; color: red;}
a.class1:visited {text-decoration: none; color: red;}
a.class1:hover {text-decoration: underline; color: red;}
a.class1:active {text-decoration: none; color: red;}
a.class2 {color:blue;}
a.class2:link {text-decoration: none; color: blue;}
a.class2:visited {text-decoration: none; color: blue;}
a.class2:hover {text-decoration: underline; color: blue;}
a.class2:active {text-decoration: none; color: blue;}
HTML:
Google
Stackoverflow
Demo:
https://jsfiddle.net/3L4xguj7/
Update 16.05.2021:
Updated link
just set a class name to ur hyper links <a> and write the CSS according to ur requirement
for Example
CSS
<style>
.red {
color : #f00; text-decoration : none;
}
.green {
color : #0f0; text-decoration : none;
}
.blue {
color : #00f; text-decoration : none;
}
</style>
Markup :
<a href="#" class="red" > Link0 </a>
<a href="#" class="green" > Link1 </a>
<a href="#" class="blue" > Link2 </a>
A simple Demo
You can give the links different classes like:
Link to some internal page
Link to some external page
And write CSS rules like:
a.internal {
color: ...;
}
a.external {
color: ...;
}
a.internal means select all a-elements with class internal.
Learn more about CSS.
RED
RED
As seen above, you simply input style="color: ###" in the a href to set it to whatever you want if you wish to set each individual link. :)
For more general, use
RED
RED
and in your CSS file state
.red {
color: red;
}
.blue {
color: blue;
}
You need some way to specify which links should have which style, and there are seveal to choose from. Some examples:
All links that is within the element with id="Main" are black:
#Main a { color: #000; }
All links that is within any element with class="Message" are blue:
.Message a { color: #00f; }
All links that themselves have class="command" are black:
a.command { color: #000; }
All links that are within a li element are dark blue:
li a { color: #009; }
You can also specify style directly for a specific link.
<a href="page.html" style="color:#000;">