How do I change it so the text is another color without having to hover the mouse over it?

There is not an option under Colors, so I guess I'd have to do something with CSS customization.

1. Highlight your link text.
2. Choose a color.
3. Keep the link text highlighted.
4. Click to add your link.

Code will look like this in the text editor:
<a href="http://LINK_URL"><span style="color:#red;">LINK_TEXT</span></a>

You'd need the CSS upgrade to change link text color in most widgets.

How do I change it so the text is another color without having to hover the mouse over it?

.post-content p a:hover,
.post-content li a:hover,
.post-content table a:hover,
.post-data a:hover,
.comments-link a:hover {
	border: none;
	text-decoration: none;
}

This method removes the underline from a single link.

Example

Note that inline style is not advised. It makes code less maintainable and uses extra bandwidth.

.post-content p a:hover,.post-content li a:hover,.post-content table a:hover {<br /> background-color: #00f1c6<br /> }

In that same selector, if you add this line:

border-bottom: 0px;

then the black underline will disappear on mouseover.

sorry to bother you,
my blog is with some kind of conflict somewhere.
it shouldn't have those black underlines on links in mouseover mode.

can u help me fixing this?
(i just want to keep the green bar, not the black underline)

many thanks in advance.

Do I insert this code into a text widget? How do I use it to make my social media buttons looks the same as they do now except that the image changes on hover?

How do I find the "title" attribute value?

How is page load time affected by uploading images to my media library versus Photobucket?

Thanks again.

First, upload the images to use for the mouseovers into your media library and copy the image links.

For each one, find the "title" attribute value and create a block of CSS like this:

a[title="Flickr"] img {
	display: none;
}
a[title="Flickr"] {
	display: block;
	background: url(http://i1059.photobucket.com/albums/t434/frommartawithlove/BFlickr.png);
	width: 210px;
	height: 46px;
}
a[title="Flickr"]:hover {
	display: block;
	background: url(http://s.wordpress.org/about/images/logos/wordpress-logo-32-blue.png);
	width: 210px;
	height: 46px;
}

I used a WordPress logo as an example above, so you'll want to replace the value of the 2nd url() function with the Flickr image you uploaded to your media library.

Is there a way to change an image on mouseover in a text widget? I'd like to do this for my social media icons but search results have all been leading me to javascript and plugins (which I can't access because I'm using free WordPress).

Thanks very much for your help.

This will produce a questionmark when you hover over the text, and the definition in a small popup. Perhaps you should also differentiate the styling of the text somehow, to show it's not just plain text; if you'd like something like that, let me know.

@southseaconversations, you should be able to use text-decoration:none and font-weight:normal properties to remove link underlining and the bold font weight.

If you need further help, please reply back here pointing to a specific example and mark this thread as 'not resolved' in the forums.

I only had to change the width of images.

Thank you very much :)

After adding this CSS the width of posted images has changed and the darkening is a bit bigger (to the right and down). How can I fit it?

Hmm, try adding this:

.entry img {
	margin-bottom: 0;
}

Note that you should remove the #greybutton lines you added to Appearance → Custom Design → CSS. They're not formatted properly and are causing trouble. Also, using an extra class or ID probably could work to target the images, but it seems like a lot of extra work and I don't think they're needed if the only links in your posts are images that get the overlay treatment.

The finished solution looks nice so far!

I've also noticed that, as you mentioned it applies to all links.. so facebook and twitter links as well. Can I block this for those two links only?

Yep. Try making the original example I posted juuust a bit more specific, like this:

.entry p a {
	position: relative;
	float: left;
	cursor: pointer;
}

.entry p a:hover:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0,0.5) url(http://s.wordpress.org/about/images/logos/wordpress-logo-stacked-rgb.png) center center no-repeat;
}

(Note that there's probably more than one way to do the same thing.) :)

You should be able to do something like this to prevent the underline from taking place:

This <a href="#" title="....mouseover content...">is a text-decoration test.</a>

Note the addition of "!important" to the CSS rule; this will make sure that this rule takes precedence over any other specified rules.

Please let me know if I can be of any further help.

Best,
P.

This <a title="....mouseover content..."> is exactly what i was looking for, but i am experiencing a nasty glitch: i cannot get rid of the bold & underline that comes automatically for text between the </a><a> </a> tags.

On the above-mentioned page it says this can be done by specifying "text-decoration: none;" in the <a>.

Although I can successfully control the colour of the text this way, e.g. </a><a> the text-decoration part is being ignored.

Thanks for any help.

I've put the following to css:
#greybutton
.entry a {
position:relative;
float:left;
cursor:pointer;
}

#greybutton
.entry a:hover:before {
content:"";
display:block;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:rgba(0,0,0,0.5) url('http://naszetrendy.files.wordpress.com/2012/08/button-3442.gif') center center no-repeat;
}

and have assigned class in 1st post: #greybutton.

..still it doesn't work. What do I do wrong?