Someone can help me with this css code for Joomla 2.5 extension - RSS news title slider.
It has very poor css styling -
#RSS-SHOW-SETTING1 p {
width:100%;
vertical-align:middle;
padding-top:3px;
padding-bottom:3px;
}
which displays me titles which are white on mouse hover (on white background make it invisible on hover). So I need to put a parameter into this css id selector which change color of hovering title to green (or any other color). I can not handle it with my modest css knowledge.
Appreciate any help!
Im guessing your default p tags are set to white so you could do:
#RSS-SHOW-SETTING1 p:hover {
color: green;
}
The easiest way to accomplish this is by placing the following css code:
#RSS-SHOW-SETTING1 p {
width:100%;
vertical-align:middle;
padding-top:3px;
padding-bottom:3px;
color: green !important;
}
You can change it by adding this piece of code to your styles:
#RSS-SHOW-SETTING1 p:hover {
color: green !important;
}
It change color to green, when mouse cursor hover the title.
Please update html and css so tha it work in all browser like this
<html>
<style type="text/css">
#RSS-SHOW-SETTING1 a:hover {
color: green !important;
}
</style>
<div id="RSS-SHOW-SETTING1">
<p>
Testing by admin
</p>
</div>
</html>
if you use #RSS-SHOW-SETTING1 p:hover then it create problem in IE browser
Related
based on the discussion here we know that it is allowed to put an <div> in an <a> tag given that we're using html5, but I was wondering that how can we change the styles in this <div>. In short, I have an html code skeleton like this:
<a href='somelink.html'>
<div style='width:100px; height:100px'>
text text text
</div>
</a>
The motivation is that I hope to achieve the effect that when the mouse hovers over the div (not only over the text), both the background and the text color in div changes. Note that somewhere in the css file, the third-party template already defines a:hover (a:focus), and I want to override the hover behavior just in this particular div. Can somebody give me a hint how I should achieve that?
To give you a concrete example, I was playing on the w3cschool.com, and the full codes are provided below. I put comments indicating where the codes to be filled in.
See the background color of the square div is light gray and the text color inside is green with an underline, and the text color changes to red when the mouse hovers over the text.
Task
I hope the effective area is the entire div, i.e., when the mouse is in the div, the following can be achieved: 1) the div changes to pink color, and 2) the text color becomes white, and 3) there's no underline when hovered anymore.
Code
<!DOCTYPE html>
<html>
<head>
<style>
/* Assume following 4 rules are provided somewhere in the existing css */
a:link {
color: green;
}
a:visited {
color: green;
}
a:hover {
color: red;
}
a:active {
color: yellow;
}
/* ==== CHANGE HERE ======== */
.fill_a {
// what is the answer?
}
.fill_div {
// what is the answer?
}
/* ==== CHANGE HERE END ==== */
</style>
</head>
<body>
<p>Mouse over and click the link: w3schools.com</p>
<a href='#' class='fill_a'>
<div style='width:100px; height:100px; background-color:#ddd' class='fill_div'>
123
</div>
</a>
</body>
</html>
Thanks for your answer in advance.
Edit 1: More background
I was seeking a non-div solution (use block'ed anchor or just a span), but the dilemma I encountered is that I was using bootstrap, especially, I want the head to be the entire link, that's kinda the motivation. For example,
<div class="panel panel-default">
<div class="panel-heading">This to be an anchor</div>
<div class="panel-body">Panel Content</div>
</div>
Based on your HTML
From your Task
CSS
.fill_a:hover{
color:white;
text-decoration:none;
}
.fill_div:hover{
background-color:pink !important;
}
you should use !important because in your html you already set the style. Meaning that the style that put inside html is priority.
Learn More about styling css https://css-tricks.com/when-using-important-is-the-right-choice/
DEMO
Try this css:
a.fill_a {
text-decoration: none;
}
a.fill_a:hover > div.fill_div {
background-color: pink !important;
color: #fff;
}
Fiddle demo here
I've just started using FontAwesome, so far so good. One question though, when I use it with an anchor tag and it has text-decoration:none, and on hover text-decoration:underline. When I hover the link, the icon gets the underline effect, too…how do I get only the link to be underlined, not the icon?
I tried to placing it outside the anchor tag, but it doesn't get the color I assigned to the link
Sample code:
<style>
a{color:red;text-decoration:none;}
a:hover{text-decoration:underline;}
</style>
<span class="fa fa-camera-retro"> </span>This's a test
Thank you
I popped your exact code into JSFiddle and noticed that the camera icon itself wasn't being underlined completely, but the space between the icon and the text was.
So, if that's what you're experiencing, you can simply add a bit of padding after the icon, that way there's no whitespace to underline.
a {
color: red;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.fa {
padding-right: 5px;
}
a:hover .fa {
color: blue;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<span class="fa fa-camera-retro"></span>This is a test
The last item in the CSS was merely to show that no underline effect was happening on hover by changing the icon's color to show formatting wasn't being applied from other items. Notice there's no space after the span tag, instead the space is created by the 5px padding applied to anything with the .fa class.
I tested this in both a very recent version of Firefox, and IE9 because those are what's on my work machine.
I had a similar issue, and found that the fa class defines an inline-block display mode. If I forced the display to inline inside a link, then everything was fine.
a > .fa {
display: inline;
}
Put your <span> outside of the <a> so its not affected by your hover...
<span class="fa fa-camera-retro"></span>This is a test
You can add a style for the a:hover span.fa selector:
<style>
a {
color: red;
text-decoration: none;
}
a:hover span.fa {
text-decoration: none;
}
</style>
<span class="fa fa-camera-retro"></span> This is a test
I have block level links, which contain other block level elements with a different color.
The problem I have is that once you visited that link Google Chrome shows the a:visited color, and not the specific colors of his children.
I've made a jsfiddle as example: http://jsfiddle.net/yvesvanbroekhoven/UTwgU
You can see the difference in Firefox & Google Chrome. Click on the link and then it the colors of the title & text should be red/green, but in Chrome they become purple.
Any ideas?
This is invalid HTML. You can't havr a block level element within an inline one. Put links inside the other tags:
<h1>
Title
</h1>
<p>
Intro text
</p>
CSS
h1 a {
color: red;
}
p a {
color: green;
}
To style a visited link, use:
p a:visited{
color: green;
}
h1 a:visited {
color: red;
}
Demo here.
It is red/green in my chrome (v 14.0.835.202)!
Anyway you can set the colors as you want:
a:visited p{
color: green;
}
a:visited h1{
color: red;
}
seems to work as expected in Chrome 17.
If a link styles aren’t inheriting to child block-level elements, try using inherit, eg:
<header>
<style scoped>
a {background-color: #f9fda2;} /* highlight */
/* without inherit h1 won’t get the link’s background-color */
a h1 {background-color: inherit;}
</style>
<a href="/">
<h1>Title</h1>
<p>meta</p>
</a>
</header>
I have a background color on my links (on hover, rails-style). And I have an img inside an a-tag that I don't want to have a background on hover.
I tried
a:hover img{ background-color: #fff; }
but that's not doing anything. How do I exclude img-tags inside a-tags from the hover?
Thx,
MrB
edit: jsFiddle
http://jsfiddle.net/rasvf/1/
In the example: "google" has a red background on hover, as intended. But when you hover over the image, it also does. It's supposed not to have a hover background.
if i understand you correctly, i think you are trying to do something like this:
a:hover img{ visibility: hidden; }
or
a:hover img{ display: none; }
EDIT
In that case you want:
a:hover img {background-color: transparent;}
Example posted on: http://jsfiddle.net/6qwJy/
It's hard to understand your example. Say I have this piece of HTML:
<a class="foo" href="#"><img src="bar.gif"/> Click me</a>
then with these style rules
a#foo:hover { background-color: blue; }
a#foo img { background-color: white; }
the image background color will always be white, also on hover.
If however you have background images on the element that contains your link and you want that to show behind the foreground image, then you can't do this. In that case you'll have to wrap the "Click me" text of the link in a span and write in your stylesheet:
a#foo:hover span { background-color: blue; }
Is this what you intended?
Ah! I did it. Easy. I just put the not-to-have-a-background-image in a different div and then did:
.otherdiv a:hover{ background-color: transparent; }
a img {
vertical-align: bottom;
}
Ok, you won't believe me, but I had the same problem above and I resolved as follows:
I had something like this:
<img src"path/to/image.gif">
And in my CSS I had:
a:hover { text-decoration: underline; }
And, believe me, I just had to put the 'img' tag in the same line as the 'a' tag, like this:
<img src="path/to/img.gif">
And that was all!!!
I wonder if there is any trick to solve this problem.
I have my link as below text and want to change the underline color.
This link contains in many lines which needs to change the underline color to be lighter than the existing one
Using border bottom is not the way to solve this because multiple lines.
are there any trick to solve this?
EDIT
#Paolo Bergantino: It works with IE8 , is it possible to hack with IE6,7?
If what you mean is a different underline color than what the text is, the only thing I can think of is to add a span around the link:
<span class='underline'>
this just<br>a test<br>of underline color
</span>
And then the CSS:
span.underline {
color: red;
text-decoration: underline;
}
span.underline a {
color: blue;
text-decoration: none;
}
And you get what you want.
EDIT:
Testing this a little further, it is not working for me on IE. If you add border-bottom, however, it surprisingly does work in all browsers, except that IE does not put a border under the last one. I will try to dig a little deeper to see if there's a cross-browser way to do this...
In case anyone is interested - this worked for me - text-decoration-color CSS property:
.example {
text-decoration: underline;
text-decoration-color: red;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color
2121 update: this works great! Other useful CSS is https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset for controlling the distance between the underline and the text.
Paolo Bergantino's answer didn't seem to work for me in Chrome on OSX (v19.0.1084.56). However moving the span inside of the a tag seemed to do the trick.
The HTML
<a class="underline" href="#">
<span>Hello world<br>this is a test<br>of changing the underline colour</span>
</a>
And the CSS
.underline {
color: red;
}
.underline span {
color: gray;
}
You can view it here: http://jsfiddle.net/itsmappleby/f4mak/
Or you can use border. This method work at ie6.
HTML
<a href="#" class='underline'>
<span>this just</span><br/>
<span>a test</span><br/>
<span>of underline color</span>
</a>
CSS
a.underline {
text-decoration: none;
}
a.underline span {
display: inline-block;
border-bottom: 1px solid red;
font-size: 15px;
line-height: 12px;
}
and example: http://jsfiddle.net/skanY/1/embedded/result/
Underlined, being a text attribute, inherits the text's color. So I doubt there is a way to explicitly change the underline color without also changing the text color.
The Underlining of links will always be the same color as the text.
sorry for ressing an old question, but i was having the same issue, and didn't find a satisfying answer, so i came up with a different solution and thought i'd share it with you.
it does include a 1x1 background image (or whatever size you prefer), but it's clean and simple - and 100% browser compatible (tested from IE6 and up).
this example has text that changes color, and the underline stays the same. you can just as easily do it other way around.
a, a:link, a:active, a:visited{
text-decoration:none;
color:#888;
background:transparent url('underline.png');
background-position:0 10px;
background-repeat:repeat-x;
}
a:hover{
color:#009ee0;
}
I know this is an old question, but I thought I'd add this...
a:active, a:link, a:visited{
background-image: linear-gradient(rgba(255,255,255,0)50%, #ff5400 50%);
text-decoration: none;
background-size: 2px 2px;
background-position: 0 1.2em;
background-repeat: repeat-x;
}
Note: Older browser support is not completely supported
USE:
<a href="your-link/" style="text-decoration-color: COLOROFUNDERLINE;">
the underline on links is done using the text-decoration css style, i think it's the same color as the text.
if you set the text-decoration to none then add a border-bottom you can change the color with the border-color style.
Also you can use this code to make underlines with different color. Use the Borders
h1{
border-bottom: 1px solid #AAAAAA
}
edit:
you can use java script to draw a line under the text