I have a newsfeed which is obviously organized by an . When the user hovers over each of the items, the background is highlighted. I'd also like to have a small "x" in the top right hand corner of each item, only shown when hovered. This "x" would be a delete button to remove that post.
Right now I just have some basic html stating: <div class="hide-button">x</div>
I know that I don't want the "x" displayed in the html, but rather have it in the CSS. So I have the <li> css below for hovering, as well as the CSS for the hide button. I'd like to know the best method to integrate the hide button div into the <li>
.hide-button {
float: right;
margin-top: -13px;
font-size: 11px;
font-family: helvetica;
color: gray;
}
.hide-button a{
text-decoration: none;
color:gray;
}
.hide-button a:hover {
text-decoration: underline;
color:gray;
}
and the list:
.newsfeedlist li {
background: white;
border-bottom: 1px solid #E4E4E4;
padding: 12px 0px 12px 0px;
overflow: hidden;
}
.newsfeedlist li:hover {
background-color: #F3F3F3;
}
Thank you so much!!!!!
Presuming your delete buttons are inside another container you could do something like
.hide-button {
float: right;
margin-top: -13px;
font-size: 11px;
font-family: helvetica;
color: tray;
display: none;
}
... the other bits of CSS ...
.newsfeedlist li:hover .hide-button {
display: block;
}
Modifying the close button to be hidden by default and then when hovering on a list item you set the display back again on the close button.
Hope this makes sense
Tim
You might really be in need of this:
Demo at jsFiddle.net
I modified an example and tushed it up for multiple content areas or images.
But hide-button element in the li and do
.newsfeedlist li:hover .hide-button {
display: inline-block;
}
and add display: none; to .hide-button
Otherwise, there's always javascript.
Related
I want to add background color and make the size bigger of my icon when its hovered but what is the correct way to implement a:hover on this CSS code?
li a i.menu-icon {
color: #f3698a;
float: left;
width: 33px;
font-size: 12px
}
You can use this code:
(You can change the background color to what you want, I put #000 for demonstration only, also you can change the width value To what you need)
li a i.menu-icon:hover {
Background-color:#000;
color: #fff;
width: 50px;
font-size: 15px;
}
I have a navigation bar. Horizontal.
I have an image on the left. Text on the right. Show below:
I want to take the image so it is position slightly underneath the text, so basically the image needs to slide a tiny bit under the left part of the text. Shown below:
My current HTML is:
<p class="menu_text">
<img class="tgss_icon" src="http://www.thegoldservicescholarship.co.uk/images/icon.jpg" alt="TGSS Icon"/>
<a class="menu_links" href="contact_us.php">Contact Us</a>
</p>
My current CSS is:
img.tgss_icon{
height: 30px;
width: 35px;
padding-bottom: 7px;
}
a.menu_links:link { color: #58595B; text-decoration: none;}
a.menu_links:visited { color: #58595B; text-decoration: none; }
a.menu_links:active { color: #E6BD13; text-decoration: none; }
a.menu_links:hover { color: #E6BD13; text-decoration: none; }
p.menu_text{
font-size: 15pt;
/*color: #58595B;*/
}
Thanks in advance! Chris.
You can do this with a negative margin on the link.
a.menu_links { margin-left: -20px; }
Demo
I want to add a block hover effect on my menu. However, the template that I bought has a large stylesheet that looks like it came out of Darth Vader's rear end - and my coding knowledge is limited making this task difficult.
Here is a fiddle of the menu part of my site (it contains the entire stylesheet as well): http://jsfiddle.net/VjhJ4/
Upon hover, I want a block hover effect with each menu link having a different block color, see this picture as example (note that I want the block to be small when the mouse is not on it): http://i.imgur.com/1xbbl.png
I came across a script that does this.
HTML:
<div id="links">
<ul>
<li><a href="#" title="Text">Link Heading One
<em>Description of link.</em>
<span>Date posted</span></a></li>
<li><a href="#" title="Text">Link Heading One
<em>Description of link.</em>
<span>Date posted</span></a></li>
</ul>
</div>
CSS:
#links li {
border: 1px dotted #999;
border-width: 1px 0;
margin: 5px 0;
}
#links li a {
color: #990000;
display: block;
font: bold 120% Arial, Helvetica, sans-serif;
padding: 5px;
text-decoration: none;
}
* html #links li a { /* make hover effect work in IE */
width: 400px;
}
#links li a:hover {
background: #ffffcc;
}
#links a em {
color: #333;
display: block;
font: normal 85% Verdana, Helvetica, sans-serif;
line-height: 125%;
}
#links a span {
color: #125F15;
font: normal 70% Verdana, Helvetica, sans-serif;
line-height: 150%;
}
I read that hover only works in certain IE versions on anchor elements so I would presume that this technique is the best one to go with.
Now, how can I add this to my own page? Feel free to update the fiddle: http://jsfiddle.net/VjhJ4/
And please let me know if you would need any more info.
You need to add border-bottom and background color on hover.
See this Demo http://jsfiddle.net/enve/VjhJ4/7/
see this DEMO. you need to set the background color etc on hover
Change:
a:hover { text-decoration: underline; }
to (changing the color to whatever color you actually want):
a:hover { text-decoration: underline; background-color:red; }
and change:
a { text-decoration: none; color: #00b7f3;}
to (changing the color to whatever color you actually want):
a { text-decoration: none; color: #00b7f3; border-bottom-color: red; border-bottom-style: solid; border-bottom-width: 5px;}
Demo: http://jsfiddle.net/KqaC8/
Edit: This will only do the hover color, working on the bottom color when not hovering, please hold.
Edit 2: This should do everything you want now.
http://codepen.io/anon/pen/wqpdI
Here's an example I made with what I believe you need. It's actually very simple, and there are many ways to do it! Basically each link (or it's parent) would need a class, and then you can change the colors for each class's tag.
I understand that you do not understand much of CSS, and you buy a template, so you must not knowing much of it.
Thats okay, so before all people send you stuff and solutions that you don't understand, i updated your fiddle with the result like the picture you referring at:
This is your fiddle
ul#secondary-menu a { font-size: 13px; color: #48423f; text-decoration: none; text-transform: uppercase; font-weight: bold; padding: 22px 16px 0 16px; }
ul#secondary-menu #menu-item-33 a {border-bottom:5px solid #00f;}
ul#secondary-menu #menu-item-34 a {border-bottom:5px solid #0f0;}
ul#secondary-menu #menu-item-35 a {border-bottom:5px solid #f00;}
ul#secondary-menu a:hover { color: #fff;text-shadow: 0 0;}
ul#secondary-menu #menu-item-33 a:hover {background-color:#00f;}
ul#secondary-menu #menu-item-34 a:hover{background-color:#0f0;}
ul#secondary-menu #menu-item-35 a:hover{background-color:#f00;}
If you don't want to modify the CSS you in the template you have, you can do something like this...
li.menu-item:hover{background:red !important;}
The !important will just override the templates styles
Here is a fiddle that gives you some basic css.. you can still use !important to make sure it overrides your template code http://jsfiddle.net/cX5bk/
I have a page at http://www.problemio.com/problems/problem.php,
and you see on the bottom-right I have a teal image. It is really a link and in that link I can't seem to get the text color to appear white.
Here is my CSS:
.button
{
display: block;
background: #4E9CAF;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
text-color: white;
font-weight: bold;
text-decoration: none;
}
a:button.visited
{
display: block;
background: #4E9CAF;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
text-color: white;
font-weight: bold;
text-decoration: none;
}
and here is how I make the link with HTML:
<a class="button" id="follow_problem" href="#" title="...">Follow Problem</a>
Any idea what is going wrong and why the color of the link isn't white?
It appears that you're trying to override the styling of the a:link class Try:
Option 1:
Here is the class you're trying to override:
a:link {
color: #3686A7;
text-decoration: none;
}
You need to add !important to the end of your style declaration:
.button {
color: white !important;
}
Option 2:
You could further define the a:link class rules:
a:link.button {
color: white;
}
That's because a:link (line 95) is more specific than .button (line 109).
You can fix it by changing the rule to
.button,
a:link.button {
/* rules */
}
Tips:
While using !important will work, it is a silly workaround that will eventually get you in trouble, and it is actually a misuse - http://www.w3.org/TR/CSS2/cascade.html#important-rules
Use Firebug for Firefox, or Chrome's inspect element, to check the css affecting a given element.
In your .button class, use this: color: white !important;. The problem happens because the a style declaration is applied after the .button declaration, in effect cancelling the color you have set in favor of the link 's color property. Using !important ensures the color rule is applied over any other.
That's because you have another class in common_elements.css that has higher priority than .button
a:link
{
color: #3686A7;
text-decoration: none;
}
Try making your .button more prioritized by !important
I've got the following.. http://jsfiddle.net/JcLx4/31/ how would I change the properties of the hyperlinked text in this example from blue and underlined to black and not underlined?
At a very basic level, like this:
a:link
{
color: black;
text-decoration: none;
}
To make it specific to links within your custom tag (incorporating display:block to make your link stretch the width of its container):
ab.s a:link
{
color: #000;
display: block;
text-decoration: none;
}
And to change the hover style:
ab.s a:hover
{
background-color: #000;
color: #fff;
}
If you want more information there is a tutorial on this page that explains the different pseudo-classes.
ab.s a{
text-decoration:none;
color: #000;
}