I want to change the color of the anchor tag and blur the image after visiting the link. but the only color is changing and the image looks the same.
this is my CSS code
<style>
.image123{
padding-left:80px;
}
.imgContainer{
float:left;
margin: 93px;
}
a:link{
color:#000;
text-decoration:none;
}
a:visited {
color:#fafafc ;
text-decoration:none;
opacity:0.2 ;
filter:alpha(opacity=60);
}
</style>
here is my HTML part
<a href="breakdown_assistance_ins.php" id="ba" name="ba" >
<img src="images/breakdwn_assiatance.png" style="height:100px; width:100px;"/>
<p>Breakdown </p>
</a>
Can anyone tell me the reason why I couldn't blur the image and help me to do the same?
add display:inline-block; to your a tag
.image123{
padding-left:80px;
}
.imgContainer{
float:left;
margin: 93px;
}
a:link{
color:#000;
text-decoration:none;
}
a:visited {
color:#fafafc ;
text-decoration:none;
opacity:0.2 ;
filter:alpha(opacity=60);
}
a{
display:inline-block; /* or block */
}
This should do the trick:
<style>
a:visited img {
-webkit-filter: blur(4px);
filter: blur(4px);
}
</style>
You can also read about filters here: https://developer.mozilla.org/en-US/docs/Web/CSS/filter
EDIT:
Went further in the exploration and as stated by #karthick nagarajan, browsers have stopped supporting anything else than the following properties (Source):
color
background-color
border-color (and border-color for separate sides)
outline color
column-rule-color
the color parts of fill and stroke
The previously given styles would work in any other situation than the :visited selector.
Also, as stated in this previous thread (How can I detect visited and unvisited links on a page?), it is not possible to retrieve the status of those links via Javascript, which make the given example impossible to fulfill given the current security specifications.
Related
I need some help to achieve my website. I have a div animated in JS that slides into the screen from right to left (with a button and by a margin-right action). It works fine in Firefox but not in Chrome : with the same value on margin-right, I see the div entirely in FF when showed, but not in GG, I only see a part of it.
The same problem appears for hiding the div; the value isn't high enough so there's still a visible part. I set a higher value for Chrome with "-webkit-margin-end" in my CSS, that helped for hidding, but when showed the problem remains. I guess I have to add a Chrome option in my script, so the "margin-right" value (or the "-webkit-margin-end" value ?) could be increased too when animated, but I actually can't find any answer to my request.
That's probably because I'm not good enough to apply it to my code, and that's why a bit help would really be appreciated.
Furthermore, is there a way to slide on page load ? I'd like the div 'open' when the user enters the website.
Here's a piece of my code :
/* CSS */
/* div */
#texte {
background-color:#FFFFFF;
border-left:0.5px solid #000000;
color:#000000;
font-size:0.9vw;
font-weight:normal;
font-family:"Proza Libre", sans-serif;
top:0;
bottom:0;
right:0;
margin-right:-125px;
-webkit-margin-end:-350px;
width:19.4%;
padding:1vw 0.6vw 1vw 1vw;
float:right;
position:fixed;
display:block;
z-index:1000;
overflow-x:hidden;
overflow-y:auto;
}
/* button */
#plus {
bottom:2.5vw;
right:2.5vw;
position:fixed;
color:#000000;
text-align:center;
font-family:serif;
font-size: 2.5vw;
font-weight:normal;
line-height:2.5vw;
text-decoration:none;
cursor:pointer;
z-index:1000;
border: 0.8px solid #000;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width:2.5vw;
height:2.5vw;
}
/* SCRIPT */
jQuery.easing.def = 'easeOutBounce';
$('#plus').click(function() {
if($(this).css("margin-right") == "125px") {
$('#texte').animate({"margin-right": '-=125'}, 'slow');
$('#plus').animate({"margin-right": '-=125'}, 'slow');
}
else {
$('#texte').animate({"margin-right": '+=125'}, 'slow');
$('#plus').animate({"margin-right": '+=125'}, 'slow');
}
});
Firefox :
Chrome :
Rather than finding an ad-hoc solution for each browser-specific bug maybe you can try finding a way to make your code work the same way for every browser.
I would avoid manipulating the margins. Instead I suggest having one main DIV with a fixed width and then have another DIV inside with the paddings you need. Then do the animation with the right attribute.
Check this snippet and see if this demo works for you.
function togglePanel() {
if (parseInt($('#main').css('right')) == 0) {
// get the current width (+ horizontal padding) (+ the border size * 2)
width = $('#main').width() + parseInt($('#main').css('padding-left')) + parseInt($('#main').css('padding-right')) + 2;
$('#main').animate({"right": -width}, 'slow');
} else {
$('#main').animate({"right": 0}, 'slow');
}
}
$('#toggleMain').on('click', function() {
togglePanel();
});
$(document).ready(function() {
togglePanel();
});
* {box-sizing: border-box;}
#main {
background:blue;
position:absolute;
padding:10px;
right:-222px;
top:0px;
bottom:0px;
width:200px;
border:1px solid red;
}
#inner {
width:100%;
padding:10px;
border:1px solid green;
background:orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main"><div id="inner">Here goes the text<br/>and more text</div></div>
<button id="toggleMain">Toggle</button>
Try this, for detecting if chrome and adding margin.
$(document).ready(function(){
var isChrome = !!window.chrome;
if(isChrome) {
$(".element").css("margin-right", "30px");
}
});
Browser detection is no good practice, see for example Is jQuery $.browser Deprecated?
A better way is to provide general cross browser solutions.
You could for example use normalize.css and then apply your own css. This maybe makes the css "resets" you need, so your own css looks good/equal in all browsers.
I have a problem with the tooltip which is not displaying on top of everything. I tried to change z-index to a really high number but that didn't work.
CSS:
a.tooltipA {
outline:none;
}
a.tooltipA strong {
line-height:30px;
}
a.tooltipA:hover {
text-decoration:none;
}
a.tooltipA span {
z-index:10;
display:none;
padding:14px 20px;
margin-top:-30px;
margin-left:28px;
width:300px;
line-height:16px;
}
a.tooltipA:hover span {
display:inline;
position:absolute;
color:#111;
border:1px solid #DCA;
background:#fffAF0;
}
.callout {
z-index:20;
position:absolute;
top:30px;
border:0;
left:-12px;
}
/*CSS3 extras*/
a.tooltipA span {
border-radius:4px;
box-shadow: 5px 5px 8px #CCC;
}
HTML:
html += '<a href="#" class="tooltipA">'
html += '<span>' + "Tooltip text"
html += '</span></a>';
You can check out this code: First tooltip is not fully visible.
JSFiddle
If possible I would like an answer using css/html but javascript is also an option. I can't use jquery. If you need more details, let me know. I also use bootstrap 3, but that doesn't matter I guess, since same thing happens on JSFiddle.
The problem with your fiddle is the margin-top:-30px in a.toolTipA span is moving the tooltip for the top link out of the viewport. You either need to start your items at least that far down the page, or remove that line from the css.
According to this previous stackoverflow post, setting position:fixed will keep your elements in the viewport.
I have this ok css3 icon created with css.
http://jsfiddle.net/5c9gN/
JS:
$('.ok').mouseenter(function(){
$(this).parent().find('.ok:after, .ok:before').css('background','#ccc');
$(this).css('background','#33CC33');
});
$('.ok').mouseleave(function(){
$(this).parent().find('.ok:after, .ok:before').css('background','#ccc');
$(this).css('background','#ccc');
});
CSS:
.ok{height:40px; width:40px; display:block; position:relative; margin-left: auto; margin-right: auto;}
.ok:after, .ok:before{content:''; height:32px; width:10px; display:block; background: #ccc; position:absolute; top:6px; left:18px; transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);}
.ok:before{height:16px; transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg); top:18px; left:6px;}
And I'm having a little issue while trying to change the color of the icon. It always changes the background color not the icon.
Could anyone help me?
Thanks
Using only CSS:
DEMO
.ok:hover:after, .ok:hover:before {
background: #33CC33;
}
Add this css
.ok.mouseover:after, .ok.mouseover:before{
background: #33CC33;
}
and update your JS code to this
$('.ok').mouseenter(function(){
$(this).addClass('mouseover');
});
$('.ok').mouseleave(function(){
$(this).removeClass('mouseover');
});
I have a line of text (a link) within a div. I'd like the div color to change on mouse over the link. I tried various things without success. You can see my current code here: http://jsfiddle.net/Grek/D3TzM/ Note that I'm not necessarily looking for a jquery solution. Tks for your help
CSS
.source-title-box a{
color:#467FD9;
display:inline-block;
}
.source-title-box a:hover{
color:#666666;
}
.source-title-box hover{background:#cb2326;}
JS:
$('a').hover(function(){
$(this).parent().toggleClass('hover');
});
you can select below a pseudo class like :hover. No need for javascript at all for this.
http://jsfiddle.net/7bFKq/
.source-title-box:hover{
background-color:#467FD9;
}
.source-title-box:hover a{
color:#FFFFFF;
}
If you must do it with a hover on a, you will need javascript.
http://jsfiddle.net/7wwdb/
$('a').hover(function(){
// .closest will get you to the div regardless of what might
// be in between. With .parent you get to the absolute parent, which
// in your case is a span
$(this).closest('.source-title-box').toggleClass('hover');
});
css is basically the same, just :hover to .hover
.source-title-box.hover{
background-color:#467FD9;
}
.source-title-box.hover a{
color:#FFFFFF;
}
jsFiddle DEMO
Just look for the closest div, the immidiate .parent() was a <span> tag (which aren't automatically block elements by nature, unless you make them that way).
$('.activity-title a').on('mouseover', function () {
$(this).closest('div').toggleClass('hover');
});
$('.activity-title a').on('mouseout', function () {
$(this).closest('div').toggleClass('hover');
});
Changes this:
.source-title-box a
{
color:#467FD9;
display:block;
text-decoration:none;
}
to:
.source-title-box a
{
color:#467FD9;
display:block;
text-decoration:none;
padding:15px;
}
And this:
.source-title-box
{
color: #000;
background: #fff;
padding: 15px;
width: 200px;
position: relative;
margin-top:10px;
border: 1px dotted #666;
}
to:
.source-title-box
{
color:#000;
background:#fff;
width:230px;
position:relative;
margin-top:10px;
border:1px dotted #666;
}
DEMO
No JS required.
Keep the JavaScript you have, and add this CSS class:
.hover {
background-color: #f00;
}
http://jsfiddle.net/RLjvB/
Greg,
There are 2 points:
1) The jquery .hover() function expects two handlers as argument.
One for handlerin (mouse over) and one for handlerout (on mouse out). Giving only one argument uses the argument as an In-Out handler, i.e the same handler for both mouse events.
2) Make sure that the script that you have written (js) is included at the bottom of the page. ie, just before closing the "body" tag.
This is because : the html element may not be loading when the script executes.
...Your HTML Code...
<script>
$('a').hover(function(){
$(this).parent().toggleClass('hover');
});
</script>
</body>
Hope this helps.
I'm having trouble with a jquery hover setup.. I use a slightly modified solution I found on this site (example 5a): http://webdesignerwall.com/tutorials/jquery-tutorials-for-designers
Basically my setup is supposed to work like this: hovering over the link element (#1) triggers a fadeIn on the em (#2) -element. #3 is a thumbnail image behind #1 and #2.
It worked yesterday but then I somehow managed to break it. I've tried checking for typos and removing unnecessary code but can't get it to work :(
I took the necessary code bits and put them on JSFiddle. I've never used it before so I hope I didn't do anything wrong.. Here's the url: http://jsfiddle.net/kuFDT/3/
html:
<ul class="showcase">
<li>
asd // #1
<em> doop derk </em> // #2
<div class="sample"></div> // #3
</li>
</ul>
jquery:
$(document).ready(function() {
$(".showcase a").hover(function() {
$(this).next("em").fadeIn(200);
}, function() {
$(this).next("em").fadeOut(200);
});
});
css:
.showcase a:link { width:300px; height:200px; float:left; background-color: #f2f2f2; }
.showcase { list-style: none outside none; }
.showcase li {
float:left;
z-index:-20;
position: relative;
}
.showcase em {
height:50px;
width:300px;
left:0;
top:280px;
display:none;
position:absolute;
z-index:-5;
color: white;
background-color: orange;
}
div.sample {
width:300px;
height:300px;
float:left;
background-color:#B3B3B3;
position:absolute;
top:0;
left:0;
z-index:-10;
}
Thanks for taking the time to read this long ass post!
-Ville
You didnt load the jQuery library in jsFiddle, it's working fine after loading the Lib :)
Jsfiddle Link