I have multiple rows and in each row is a span which is set to transparent:
span {
color: transparent;
}
Now upon the hover of a row, I set the span to be visible by adding the following jQuery:
$('.single-row').hover(function(){
$('span').css("color", "#999");
}, function() {
$('span').css("color", "transparent");
}
);
However, this effects every row at once rather than the specific row being hovered over.. what syntax do use to effect the specific row being hovered over rather than each row without using id's?
You can do it using $(this).find('span') to select a span inside current hovered row
$('.single-row').hover(function(){
$(this).find('span').css("color", "#999");
}, function() {
$(this).find('span').css("color", "transparent");
}
);
Or use a shortcut $('span',this)
$('.single-row').hover(function(){
$('span',this).css("color", "#999");
}, function() {
$('span',this).css("color", "transparent");
}
);
The javascript method in the currently-accepted answer will work fine (provided the bug mentioned in comments is fixed) -- but just for completeness, a pure CSS version of this would be
.single-row span {color: transparent}
.single-row:hover span {color: #999}
Related
I'm trying to create a simple webpage where you can hover over sets of words. When you hover, I would like all other words you are not hovering over to become struck out.
The HTML is:
<div class="row col-xs-12" id="jobs">
<h2><span class="selector">Writer and Editor</span>, <span class="selector">Social Media Slayer</span>, <span class="selector">Amateur Developer</span>.</h2>
</div>
Right now I have a simple jQuery function that, when I hover over each element, changes the spans font color like so:
$('.selector').hover(function(){
$(this).css('color', '#fddbd1');
}, function() {
$(this).css('color', 'white');
});
What I would like to do is also have a script that, on hover, strikes out the text in every span that is not being hovered over. I would also like it so that when you click on each span, the strike outs in the other spans remain until you click elsewhere.
I know how to do this with lots of repetitive code, but I was hoping to make it nice and DRY.
To strikethrough all spans class selector that are not hovered over, and retain strikethrough on clicking on element, removing when clicking on another element.
$('.selector').hover(function(){
// Cleanup / Reset to default position
$('.selector').removeClass('clicked');
$('.selector').css('text-decoration', 'none');
$('.selector').not(this).each(function() {
$(this).css('text-decoration', 'line-through');
});
}, function() {
if(!$(this).hasClass('clicked'))
{
$('.selector').not(this).each(function() {
$(this).css('text-decoration', 'none');
});
}
});
$('.selector').click(function(evt) {
$('.selector').not(this).each(function() {
$(this).css('text-decoration', 'line-through');
});
$(this).addClass('clicked');
});
$('body').click(function(evt) {
if(!$(evt.target).hasClass('clicked')) {
$('.selector').css('text-decoration', 'none');
}
});
I'm trying to make it so that when you hover a list item, the corresponding piece is highlighted, and when you hover the piece, the corresponding list item is highlighted.
So far when you hover on the list item, it does highlight the corresponding map area, but how would I write it so that it hovered reciprocally?
I tried:
$('.one, #one').hover(function(){
$('#one, .one').attr("fill", "#213A46");
$(".info-one").fadeIn();
},
function(){
$('#one, .one').attr("fill", "#009A8B");
$(".info-one").hide();
});
and that did not seem to work. Any suggestions would be helpful. Here's a codepen of what I'm currently working on as well: http://codepen.io/anon/pen/zGzoMY
You can't change the state of an element, so you do have to change your .region-list li:hover { by .region-list li:hover, .region-list li.hover {.
Then you can add it in your JS, i.e. :
$('#four').hover(
function() {
$('#four').attr("fill", "#213A46");
$('.four').addClass('hover');
$(".info-four").fadeIn();
},
function() {
$('#four').attr("fill", "#3F6C80");
$('.four').removeClass('hover');
$(".info-four").hide();
}
This isn't possible. You will need to add a class like .hover to the element.
see: https://forum.jquery.com/topic/jquery-triggering-css-pseudo-selectors-like-hover
The way to trigger the hover on the li by hovering on the map is something like this:
$('#one').hover(function() {
$('.one').trigger('mouseenter');
});
But to add the class you will do something like
$('#one').hover(function() {
$('.one').addClass('hover');
});
Then remember to remove the class on mouseleave.
You need to add the hover handler to the graphic that contains #one. Otherwise, when you mouse over the text inside the polygon, that's treated as leaving the polygon.
$('.one, g:has(#one)').hover(function() {
$('#one').attr("fill", "#213A46");
$('.region-list .one').css({
backgroundColor: '#213a46',
color: '#ffffff'
});
$(".info-one").fadeIn();
},
function() {
$('#one').attr("fill", "#009A8B");
$('.region-list .one').css({
backgroundColor: 'inherit',
color: 'inherit'
});
$(".info-one").hide();
});
Modified Codepen
I've only updated #one, the others are similar. It would be better to implement this using DRY methods where you find the reciprocal elements using data attributes, but I didn't bother with that rewrite.
The below code takes into account different tags and turns the background red if the tag is clicked on. I want to code it so that if it is clicked on again, it changes back from red and 'deletes' the background, or at least set it to null. I have tried an if statement to no avail. I know that I can just make another click event that changes the background to white, but this is for experimental purposes and i was wondering if this CAN be done with if statements. thanks to ya.
<script>
$(document).ready(function() {
$("p, h1").click(function() {
$(this).css("background-color", "red");
if ($(this).css("background-color", "red")) {
$(this).css("background-color", "null");
}
});
});
</script>
First you need to use the getter version of .css() like
if($(this).css("background-color") == "red"){
but it still won't work because, the css getter will return a rgb format value and will return non consistent values across browsers.
So the solution is to use a css based solution using toggleClass()
.red {
background-color: red;
}
then
$(document).ready(function() {
$("p, h1").click(function() {
$(this).toggleClass("red");
});
});
Demo: Fiddle
$('p, h1').click(function() {
var $this = $(this);
var altColor = $this.data('altColor');
$this.css('background-color', altColor ? '' : 'red');
$this.data('altColor', ! altColor);
});
This answers your question, but you should really be using a CSS class for this.
This is easily done using CSS, and is a bit more straight forward. If you create a CSS class for the click, then you can just toggle it on/off each time the item is clicked:
CSS
p, h1 {
background-color: none;
}
p.red, p.h1 {
background-color: red;
}
JavaScript:
$('p, h1').click(function() {
$(this).toggleClass('red');
});
I want to convert this css behaviour into a jquery hover statement (because IE7/8 doesn't support css3). Basically when hovering over a row, I want the whole row to be highlighted except for the last cell.
#mysearchtable tr:hover td:not(:last-child)
{
background-color: #444444;
}
I've tried using this:
$("#mysearchtable tr td:not(:last-child)").hover(
function () { $(this).addClass('hoverclass') },
function () { $(this).removeClass('hoverclass') });
The problem with this is $(this) is only returning the actual cell that was hovered over. I can try and use $(this).parent() but that would give me the whole row. What I want is the highlight the whole row, except the last cell.
Would anyone know a solution?
Cheers.
Untested, but try:
$("#mysearchtable tr").hover(
function () { $(this).find("td:not(:last-child)").addClass('hoverclass') },
function () { $(this).find("td:not(:last-child)").removeClass('hoverclass') }
);
Here you can use this way. Jsfiddle demo
$("table td").not('td:last').hover(function() {
$(this).css('background-color','red');
});
Say I have the following css:
.cls {}
.cls ul {list-style-type:none;}
.cls ul li
{
border-color:#ff0000;
border-style:solid;
float:left;
padding:0px 20px 0px 2px;
border-left-width:1px;
border-bottom-width:0px;
border-top-width:0px;
border-right-width:0px;
}
I assign the class "cls" to a <div> as follows:
<div class="cls">
<ul>
<li id="foo">Foo</li>
<li id="bar">Bar</li>
</ul>
</div>
If I manipulate element properties using jquery, say I change the border-left-color on the "bar" listitem as follows:
$("#bar").css("border-left-color", "#0000ff");
Is there a "jquery way" to RESTORE the properties that the listitem "bar" had inherited when the containing <div> was initially assigned the class "cls"?
Obviously without having to do:
$("#bar").css("border-left-color", "#ffff00"); }.
Something in the form of, $().restoreClass() or equivalent???
Define a new class
.blueBorder {
border-left-color: #0000ff;
}
Then you can toggle the style with
$("#bar").toggleClass('blueBorder'); // with blue border
$("#bar").toggleClass('blueBorder'); // without blue border
$("#bar").toggleClass('blueBorder'); // with blue border
This is the best way to toggle style. Keep in mind that you can apply more than one class to a single HTML element, so that you can combine styles together. For example
$("#bar").toggleClass('blueBorder'); // with blue border
$("#bar").toggleClass('redBackground'); // with blue border and red background
$("#bar").toggleClass('blueBorder'); // with red background
You should keep your presentation (css) separated from the behavior (js), so the following is not recommended:
$("#bar").css("border-left-color", "#0000ff");
Imagine the work you will have, if you write this a thousand times and later your customer decides to change it to yellow.
Demo here
$("#bar").css("border-left-color", "");
When you use .css it adds a style attribute to the element. As long as there was not a style attribute when the page was rendered, calling $().removeAttr('style') should do what you want.
JsFiddle Example
Try: $("#bar").removeAttr('style')
You can get the particular CSS property and store it in a string.
Then you can restore it when you are done with the change.
But you have to be careful with the name of CSS property :
Here it is working:
http://jsfiddle.net/KgEjr/4/
var myOriginal = "" ;
$('#st').click(
function() { storeAndChange(); } );
$('#re').click(
function() { restore(); } );
function storeAndChange()
{
myOriginal = $("#bar").css("border-left-color");
$("#bar").css("border-left-color", "#0000ff");
$("#msg").text("changed");
}
function restore()
{
$("#bar").css("border-left-color", myOriginal);
$("#msg").text("restored");
}
Could you store the style in a data attribute and recover it later? This seems to work with your example.
$(function(){
$(".cls ul li").each(function(){
$(this).data("defaultStyle",$(this).attr("style") || "");
});
$("#foo").css({"border-left-color": "#ff00ff", "font-style": "italic", "background-color": "#efefef"});
$("#bar").css({"border-left-color": "#0000ff", "font-weight": "bold", "background-color": "#cdcdcd"});
$(".cls ul li").click(function(){
$(this).attr("style", $(this).data("defaultStyle"));
});
});