jquery hover not working on my list items
Tag : jquery , By : user157654
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , Try using the mouseover and mouseout events. I believe your filtering selector was looking for the elements parent?$('.category_list li').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
alert('I m here');
$(this).parent().css('text-decoration','underline');
} else {
alert('I m gone');
$(this).parent().css('text-decoration','none');
}
});
.category_list.over
{
text-decoration: underline;
}
$('.category_list li').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') { alert('I m here'); }
else { alert('I m gone'); }
$(this).parent().toggleClass('over');
});
|
Tag : css , By : Steve O.
Date : March 29 2020, 07:55 AM
hop of those help? In IE8, when you adjust the margin-top: -15px, it pushes the UL box top to fit, instead of letting the LI go outside the UL box. So all the other tabs move up to fit the new UL box. I suggest setting the non-hover LI to margin-top: 15px and hover LIs to margin-top: 0--reverse it. #mainmenu UL LI
{
margin-top: 15px;
}
#mainmenu UL LI:hover
{
margin-top: 0;
}
|
Why is active hover CSS only working on a few of these list items
Date : March 29 2020, 07:55 AM
it should still fix some issue The theme uses the :before pseudo-element of the lis to display the icon, while FontAwesome uses the :before of the anchor to do it. You need to move the content (and apply the font-family) from the li element to the anchor, so the theme styles apply. Here's the fix (I also added some rules for the height difference between the two fonts): .et-social-icon.fa-soundcloud.fa-2x:before {
content: "";
}
.et-social-icon.fa-2x {
font-size: 0;
}
.et-social-icon.fa-2x a {
font-size: 30px;
line-height: 24px
}
.et-social-icon.fa-soundcloud a:before {
content: "\f1be";
font-family:FontAwesome !important;
}
|
Border-bottom below the list items on hover is not working
Tag : html , By : user182203
Date : March 29 2020, 07:55 AM
|
ReactJS hover/mouseover effect for one list item instead of all list items
Date : March 29 2020, 07:55 AM
wish of those help I would make a Task component. You don't want to set the state of the text in the ListView component, because then this.state.text is shared by each task in the map. Each task should be aware of its own hover, and not the hover of the other children. class Task extends React.Component {
state = {
text: ""
};
onMouseOver(e) {
this.setState({
text: "delete me"
});
}
onMouseOut(e) {
this.setState({
text: ""
});
}
render() {
return (
<li
onMouseEnter={this.onMouseOver.bind(this)}
onMouseLeave={this.onMouseOut.bind(this)}
>
{this.props.todo} {this.state.text}
</li>
);
}
}
class ShowList extends React.Component {
constructor(props) {
super(props);
this.state = {
newToDo: ""
};
}
render() {
const { text } = this.state;
return (
<div>
<h4>To Do's</h4>
<ul>
{this.props.tasks.map(todo => {
return <Task todo={todo} />;
})}
</ul>
</div>
);
}
}
|
Boards Message :
Related QUESTIONS :