Please, can you tell me why when I visit one of the two links in the code, the picture does not get radius? And what can I do to get that done?
Notice the a:visited div.container div.title works fine
<html>
<head><title>Some title</title>
<style>
.container
{
width : 100;
height : 100;
}
.title
{
position : absolute;
}
a:visited.container img.pic
{
border-radius:50%;
}
a:visited div.container div.title
{
color : red;
}
</style></head>
<body>
<a href="#link01">
<div class="container">
<img class="pic" src="leb.jpg">
<div class="title">Title 01
</div>
</div>
</a>
<a href="#link02">
<div class="container">
<img class="pic" src="leb.jpg">
<div class="title">Title 02
</div>
</div>
</a>
</body>
</html>
Thanks
From w3schools.com
Definition and Usage
The :visited selector is used to select visited links.
Tip: Use the :link selector to style links to unvisited pages, the
:hover selector to style links when you mouse over them, and the
:active selector to style links when you click on them.
Browsers limits the styles that can be set for a:visited links, due to
security issues.
Allowed styles are:
color background-color border-color (and border-color for separate
sides) outline color column-rule-color the color parts of fill and
stroke All other styles are inherited from a:link.
You can use javascript for this purpose but not $("a:visited") since they don't support it anymore.
Solution with click event
a.visited .pic {
border-radius: 50%;
}
then import jQuery and add these lines between tags. This will add "visited" class on every clicked link
$("a").on('click' , function() {
$(this).addClass("visited");
})
Be aware after page reloads classes will be lost
Change the order of the declaration:
Instead of
a:visited.container img.pic
use
a.container:visited img.pic
I just saw another issue: None of your tags have the class .container set. I guess you mean something like that:
a:visited div.container img.pic
Also, the first declaration looks strange:
.container
{
width : 100;
height : 100;
}
You did not put any unit there (but it is necessary).
I recommend to change it to
.container
{
width : 100px;
height : 100px;
}
Related
My problem is that the .row a color is also affecting my contact link to be white, and even tho I try changing it to ex. red it does not work, but the hoover works so it becomes green.
.row a {
color: white;
text-decoration: none;
}
a.contact:link {
color: red;
}
a.contact:hover {
color: green;
}
<div class="row">
<div class="col-3 col-s-3 menu">
<ul>
<li>Contact</li>
</ul>
</div>
<div class="contact">
<h2>Phone:</h2>
<p>00000000</p>
</div>
</div>
I have also tried adding a class inside like this with no luck,
<p><a class="contact" href="tel:+0000000" target="_blank">0000000</a></p>
How do I change my phone link to have a different color?
but the hoover works so it becomes green.
Given the code you have, that won't be the case. It would be if you either set the class on the link (as in your second example) or used the class in a descent combinator (as you did in for the row class).
If you change that then you would get the behaviour you describe.
:hover works but :link does not because you have visited the link.
:link only applies to unvisited links (its companion is :visited).
Since the link is visited, you have no styles that match it other than .row a.
You can remove the requirement for the link to be unvisited (i.e. a.contact or .contact a depending on if you move the class attribute or not) or add a style for visited links (e.g. .contact a:link, .contact a:visited {}).
All what you need to change is this two classes:
.contact a {
color: red;
}
.contact a:hover {
color: green;
}
Because you select the element by class name and then all anchors inside of them.
Is it possible to change the background-color of a div inside a link using only a :visited pseudo class and without using Javascript?
<!DOCTYPE html>
<html>
<head>
<style>
a:hover {background-color:blue;}
a:visited {background-color:green;}
.smallbox {
background-color: #666;
height: 50px;
width: 50px;
}
.smallbox:hover {background-color:blue;}
.smallbox:visited {background-color:green;}
</style>
</head>
<body>
<div class="smallbox"></div>
</body>
</html>
Yes, I believe you can do this. Just remember the visited pseudo class belongs to the link, not the div.
a:hover .smallbox {background-color:blue;}
a:visited .smallbox {background-color:green;}
a:visited .smallbox:hover {background-color:blue;}
.smallbox {
display: block;
background-color: #666;
height: 50px;
width: 50px;
}
<span class="smallbox"></span>
As pointed out by Dekel in the comments, a div inside an anchor element is invalid HTML. You could cheat and put a span inside the link and set its display property to "block", but that's probably not really better.
If you just need a link that behaves like a block element rather than an inline element, consider switching the anchor tag's display property to block and removing the inner element entirely as suggested in this post: <div> within <a>
Instead of applying it to a div, why not apply it directly to the "a" tags, as you did, and remove the div? Why do you need it? a: hover { background-color:blue; } should work just fine. You just need to add a display:block to the a:hover style, as well.
Or, if you have multiple a tags on the page and only want to apply it to one of them, you can use an id and apply it to that:
<a id="someId" href="#">My Link</a>
CSS:
#someId {
background-color: blue;
display: block;
}
I have defined this hover for div element
div.MyCSSClass:hover
{
background-color: purple;
}
This is my HTML source:
<div class="
<ul class="MyParentCSSClass">
<li>
<div>
<div>
<div class="MyCSSClass">
<!-- I want to remove CSS hover for this div element -->
I want to remove the hover when the div.MyCSSClass is a child of MyParentCSSClass, So I add this to remove the hover style in CSS:
.MyParentCSSClass div.MyCSSClass:hover
{
}
But it did not work. I still see the same hover style.
Is there a way to remove hover in CSS without me creating a new CSS class for my div tag? I want to keep the same name as I have other CSS property uses the 'MyCSSClass'.
Thanks for the suggestion. I tried
background-color: none !important;
But when I look into chrome, that CSS is being over-written by
.MyGrandParentClass div.MyCSSClass:hover
{
background-color: purple;
}
and the html source is
<div class="MyGrandParent">
<ul class="MyParentCSSClass">
<li>
<div>
<div>
<div class="MyCSSClass">
<!-- I want to remove CSS hover for this div element -->
My question is how my 'Remove hover' css rule is being over-written? I have put "!important" to my rule.
.MyParentCSSClass div.MyCSSClass:hover {
background-color: none;
}
This will overwrite the background color given by div.MyCSSClass:hover. if you are keeping MyParentCSSClass div.MyCSSClass:hover empty as MyParentCSSClass div.MyCSSClass:hover {}, it will not overwrite anything or doing nothing actually.
You need to re-write all the previously added styles to the hover event. In the case you specified, please do the following:
.MyParentCSSClass div.MyCSSClass:hover
{
background-color: none;
}
Background-color : none; is not w3c standard. It will work on some browser but according to w3c standard it's not right way.
So try to use background-color: transparent which will work good on all browsers and w3c can validate your code.
Have fun.
I currently have a html file that contain such div:
div.myClass:visited {
background-color: red;
}
<div class="myClass" href="link">
</div>
What I am trying to do here is to have div direct to the given link and if the link is visited already, div background-color changes to red. The link does work fine, however changing the background color when the link is visited does not work. Is there a way to change the background color of div that contains a visited link? Thank you!
Use Javascript to replace innerHTML
<script type = "text/javascript">
function ReplaceContentInContainer(id, content) {
var container = document.getElementById(id);
container.innerHTML = content;
} </script>
<div id="example1div" style="border-style:solid;padding:10px; text-align:center;">
I will be replaced when you click.
</div>
Click me to replace the content in the container.
use <a/> instead of div and style it like div by giving it display:block; and width and height
for example:
<a class="myClass" href="http://www.lego.com/en-us/"></a>
CSS:
.myClass {
background-color: blue;
width:200px;
height:200px;
display:block;
}
.myClass:visited {
background-color: red;
}
.myClass:hover{
background-color: green;
}
View on CodePin
Also look at :
How can I detect visited and unvisited links on a page?
Privacy and the :visited selector
So I'm trying to get a onMouseOver to replace an image when the mouse is hovering over a div, unfortunately, as I have it right now it only replaces the image when the mouse is directly over the image, not the div, is there a way to get this to work?
Should I use a CSS to place the image, and replace the image on hover instead?
<div class="link">
<a href="link.html">
<img src="img.png" onMouseOver="this.src='hoverimg.png'" onMouseOut="img.png'"
<div class="title">Title</div>
</a>
</div>
I prefer using CSS for this:
<div class="image-hover">
Some title
</div>
.image-hover { background: url(...);}
.image-hover:hover { background: url(...);}
This can be achieved with CSS and background images. You also should not be using a block level element (div) inside of an inline element (a). I've swapped it for a span. For example:
<style type="text/css">
.link a {
display:inline-block;
background: url('img.png') top left no-repeat;
width:(imagewidth)px;
padding-top:(imageheight)px;
}
.link a:hover {
background: url('hoverimg.png') top left no-repeat;
}
</style>
<div class="link">
<a href="link.html">
<span class="title">Title</span>
</a>
</div>
The complete optimum would be combining the two images into what is called a sprite and use background-position.
You can do this with CSS or jQuery. Most people will recommend that you use CSS because it is easier to debug:
If you want the image to change when you hover on the div, you can apply a :hover state to the div:
.link img{
background: url("image1.png");
}
.link:hover img
{
background: url("image2.png");
}
However you should note that this basically treats img as an inline-block element and does not change the src attribute.
jQuery will allow you to change the source, but it must be debugged if something goes wrong, and if JS is disabled, it will not run.
$(".link").hover(function(){
$(this).find("img").attr("src", "image2.png");
}).mouseout(function(){
$(this).find("img").attr("src", "image1.png");
});
JSFiddle