I am trying to show an edit icon on a cells hover state, using font awesome.
How can make the class name unique so I can target it with css for each row?
import {Icon} from 'react-fa'
if(this.props.day.achievements) {
listItems = this.props.day.achievements.map((achievement) => (
<div className="cell" key={achievement + "_achievements"}>
{achievement}
<div className="edit">
<a href="#">
<Icon name="pencil-square" className="edit" />
</a>
</div>
</div>
))
}
I am using the following css:
.cell:hover .edit {
display: block;
}
.edit {
padding-top: 7px;
padding-right: 7px;
position: absolute;
right: 0;
top: 0;
display: none;
}
.edit a {
color: #000;
}
How can I display the icon for each cell?
Since you're using position:absolute on the edit wrapper, try adding position:relative to the .cell. I suspect your icons ARE showing but they're all floating up to the top overlapping with each other.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Could anyone help me by describing how etc. I do to makes for a function as illustrated.
What I want is that when I mouse over a product box (have not fixed height),
I want to get a box with the buy button, etc. that looks like the picture.
Know that I do not put up the code or, but I do not know where to begin.
So if anyone has any tips or so, I'd be grateful!
Try
button {
display: none;
}
li:hover > button {
display: block;
}
<ul>
<li>Description 1<button>Buy</button></li>
<li>Description 2<button>Buy</button></li>
</ul>
The idea here is to use the > operator to tell CSS to change something in our target. The target being the Buy button inside the li tag.
http://jsfiddle.net/beautifulcoder/kj2XA/
1) First of all: make your items fixed size. This prevents later issues (in layout) and allows you to create effect you described. Like:
HTML (not complete):
<div class="item-wrapper">
<div class="item-content">
<!-- item images etc here -->
</div>
<div class="item-actions">
<button class="buy">Buy</button>
</div>
</div>
CSS:
.item-wrapper {
width: 200px;
overflow: visible;
float: left;
background: #999999;
margin: 5px;
position: relative;
border: 2px solid #fff; /* without this you have unwanted size effects on hover*/
}
.item-content {
width: 200px;
height: 300px;
}
.item-actions {
display: none;
position: absolute;
background: #888;
top:300px;
z-index: 10;
left: 0px;
width: 200px;
height: 100px;
}
2) create javascript with jquery for your items like:
$('.item-wrapper').hover(function () {
// Change css on hover .. this could be done also by changing class
$(this).css({'border':'2px solid #880088'});
$(this).find(".item-actions").slideDown("fast");
}, function(){
$(this).css({'border':'2px solid #fff'});
$(this).find(".item-actions").slideUp("fast");
});
Here is fiddle: http://jsfiddle.net/h23mY/
This is also nice effect: http://jsfiddle.net/ww53e/
lets say the item is enclosed by div tag, now use css hover on
<script>
//on document load item1-buy.hide(); dont forget to use jquery
</script>
<div id="item1">
//item goes here.
<input type="submit" id="item1-buy" value="Buy">
</div>
css:
#item1:hover {
//here you can style how ever you want. Add orange border and so on...
}
now on hover unhide the buy button using jquery #item1-buy.show();
Check the DEMO
I've made a simple markup to show you the idea:
<div class="item">
<img src="http://lorempixel.com/200/200/" alt="" />
<span>15$</span>
<div class="buy">BUY</div>
</div>
And the CSS:
.item {
float: left;
padding: 10px;
border: 1px solid #ccc;
margin: 10px 10px 0 0;
}
span{
display: block;
}
.buy {
padding: 5px;
background: green;
display: none;
}
.item:hover {
border: 1px solid yellow;
}
.item:hover .buy {
display: inline-block;
}
Update: still an issue with the last image in a row, but hope it helps: DEMO 2
<div class="item">
<img src="http://lorempixel.com/200/200/" alt="" />
<span>15$</span>
<div class="buy">
<span class="button">BUY</span>
</div>
</div>
I have the following code with font-awesome:
HTML:
<div>
<i class='icon-chevron-down font-big'></i>
</div>
<div>
<i class='icon-chevron-down font-big'></i>
</div>
CSS:
.font-big {
font-size: 30px;
line-height: 6px;
}
.font-big:hover {
opacity: .5;
}
The problem is that the icons overlap, as you can see on this jsFiddle.
How can I make it so that the hovering behavior is correct: the bounds of each icon should not extend and overlap the other ?
Check out this jsfiddle:
http://jsfiddle.net/fTdRS/
You could try putting the icons into an inner div similar to this example.
div.inner {
xdisplay: block;
width: 280px;
height: 80px;
display:table-cell;
vertical-align:middle;
}
I want to place two font icons one above the other. So I can use it as:
<span class="icon1-on-icon2" />
Is it possible to define CSS class(es) to achieve this? It's not permitted to use another elements inside a span i.e. something like that:
<span class="stack">
<span class="icon1"/>
<span class="icon2" />
</span>
Sure, why not use :after and :before pseudo-selectors?
CSS
.font-icon {
height: 40px;
width: 20px;
}
.font-icon:after, .font-icon:before {
color: white;
content: '';
display: block;
font-family: 'your-font-icon';
height: 20px;
position: relative;
width: 20px;
}
.font-icon:before {
background: red;
content: 'h';
}
.font-icon:after {
background: blue;
content: 'g';
}
HTML
<span class='font-icon'></span>
Codepen sketch here: http://cdpn.io/lehzr
UPDATE
To place them on top of each other, simply change the position to absolute, put a relative on the container element, and set top and left to 0 for both the after and before.
Example: http://cdpn.io/lehzr
Hope that helps!
Basically I'm making a navigation bar and due to Jquery doing a lot of resizing to make a website look 'pretty' I don't want to use a horizontal list and so each button is created like so:
<img src="homeicon.png"><span id="homex"><br /><img src="home.png" /></span>
(yes they're all image buttons for good reason)
but the only problem is they're fixed and set to "top 0" at the top of the page and as a result cannot sit next to each other but rather overlap, any idea on how I can I still keep the position to fixed and they top to 0 yet keep them next to each other?
HTML
<div id="top">
<img src="homeicon.png"><span id="homex"><br /><img src="home.png" /></span>
</div>
CSS
#top a.button { position: fixed; top: 0; padding: 12px; background: url('glacial_ice.jpg'); text-decoration: none; color: black; border-radius: 0px 0px 25px 25px; }
#top { position: relative; top:0; padding-left: 25px; }
Init function (runs on $(document).ready())
$('a.button').animate({
height: '+=5px',
}, 20, function() {
$('a.button').animate({
opacity: 0.6,
height: '-=5px',
}, 20);
});
Thanks
Put them all in a container, i.e. id="header", give the header position:fixed;top:0;etc...
Then, for each of the link/buttons give them:
position:relative;display:inline-block;float:left;
if you want them centered, then in the #header use text-align:center; and remove float:left from the links
So the container will be fixed, but the buttons inside will be relative and not overlap.
hope this helps!
very crude example
http://jsfiddle.net/6SCTZ/
<div id="header">
<div class="button">button1</div>
<div class="button">button2</div>
<div class="button">button3</div>
</div>
CSS:
#header { position:fixed;top:0;width:100%;height:30px;background:black; text-align:center }
.button {position:relative;display:inline-block;color:white;margin:0 5px 0 5px;}
Just put whatever elements need to be fixed within a container element (in this case, I'll use a div with an ID of "top_fixed").
Consider the following html:
<div id='top_fixed'>
<a href='http://google.com'>Google</a>
<a href='http://yahoo.com'>Yahoo</a>
</div>
<div id='tall'></div>
Now, the following CSS:
a { display: inline; }
#top_fixed { position: fixed; top: 0; left: 0; width: auto; }
#tall {height: 2000px; background: #000;}
DEMO: http://jsfiddle.net/mHKNc/1/
I use anchor as my site navigation.
<div id='nav'>
<a href='#abouts'>
<div class='navitem about'>
about
</div>
</a>
<a href='#workss'>
<div class='navitem works'>
works
</div>
</a>
</div>
The CSS
#nav {
margin-left: 50px;
margin-top: 50px;
text-transform: uppercase;
}
.navitem {
background: #333;
color: white;
width: 230px;
height: 50px;
font-size: 25px;
line-height: 50px;
padding-left: 20px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
margin-top: 10px;
}
.about:hover {
background: #cc00ff;
}
.about:active {
background: #ff00ff;
color: #000;
width: 250px;
}
.works:hover {
background: #0066FF;
}
.works:active {
background: #0099cc;
color: #000;
width: 250px;
}
I'm wondering how to keep the div element style keep in the :active state once after the click until I hit another nav bar item, so how to do it?
Combine JS & CSS :
button{
/* 1st state */
}
button:hover{
/* hover state */
}
button:active{
/* click state */
}
button.active{
/* after click state */
}
jQuery('button').click(function(){
jQuery(this).toggleClass('active');
});
The :target-pseudo selector is made for these type of situations: http://reference.sitepoint.com/css/pseudoclass-target
It is supported by all modern browsers. To get some IE versions to understand it you can use something like Selectivizr
Here is a tab example with :target-pseudo selector.
I FIGURED IT OUT. SIMPLE, EFFECTIVE NO jQUERY
We're going to to be using a hidden checkbox.
This example includes one "on click - off click 'hover / active' state"
--
To make content itself clickable:
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked ~ label
.my-div{background-color:#000}
<input type="checkbox" id="activate-div">
<label for="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
</label>
To make button change content:
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked +
.my-div{background-color:#000}
<input type="checkbox" id="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
<label for="activate-div">
//MY BUTTON STUFF
</label>
Hope it helps!!
You can use a little bit of Javascript to add and remove CSS classes of your navitems. For starters, create a CSS class that you're going to apply to the active element, name it ie: ".activeItem". Then, put a javascript function to each of your navigation buttons' onclick event which is going to add "activeItem" class to the one activated, and remove from the others...
It should look something like this: (untested!)
/*In your stylesheet*/
.activeItem{
background-color:#999; /*make some difference for the active item here */
}
/*In your javascript*/
var prevItem = null;
function activateItem(t){
if(prevItem != null){
prevItem.className = prevItem.className.replace(/{\b}?activeItem/, "");
}
t.className += " activeItem";
prevItem = t;
}
<!-- And then your markup -->
<div id='nav'>
<a href='#abouts' onClick="activateItem(this)">
<div class='navitem about'>
about
</div>
</a>
<a href='#workss' onClick="activateItem(this)">
<div class='navitem works'>
works
</div>
</a>
</div>
If you want to keep your links to look like they are :active class, you should define :visited class same as :active so if you have a links in .example then you do something like this:
a.example:active, a.example:visited {
/* Put your active state style code here */ }
The Link visited Pseudo Class is used to select visited links as says the name.