We Keep Coding

How do I detect hover to elements inside of each() in jQuery?

Thanks for taking a look at my question.
I'm trying to be able to hover over portfolio items but I need to loop through them using each() because I need some way of identifying each item.
I'm trying to hover over .recent-work-item to show .recent-work-item__overlay the .show-none class does display:none;
Neither the hover nor the on.("mouseenter", function(){}) is working.
Here is the HMTL:
<section class="recent-work-item" data-portfolio-id="rwi-<?php echo $i;?>">
<div class="recent-work-item__overlay show-none">
<h3 class="color-white bolder-font"><?php the_title(); ?></h3>
VIEW CASE
</div>
<div class="recent-work-img">
<img src="<?php echo get_template_directory_uri();?>/assets/img/work1.jpg" class="portrait">
</div>
Here is the jQuery:
$.each($('.recent-work-item'), function(){
var thisid = $(this).attr("data-portfolio-id");
console.log(thisid);
$("[data-portfolio-id="+"'"+thisid+"']").on('mouseenter', function(){
$(thisid).find('.recent-work-item__overlay').removeClass('show-none');
});
$("[data-portfolio-id="+"'"+thisid+"']").on('mouseleave',function(){
$(thisid).find('.recent-work-item__overlay').addClass('show-none');
});
});
This is not working, I can't get the hover to work and all I want to do is add or remove a class, can I not do this in each().
I've researched thoroughly in StackOverflow but can't find an answer. I would REALLY appreciate any help I can get on this.

I have test your code in my codepen, and the problem you should use $(this) than use $(thisid)
$.each($('.recent-work-item'), function(){
var thisid = $(this).attr("data-portfolio-id");
$("[data-portfolio-id="+"'"+thisid+"']").on('mouseenter', function(){
$(this).find('.recent-work-item__overlay').removeClass('show-none');
});
$("[data-portfolio-id="+"'"+thisid+"']").on('mouseleave',function(){
$(this).find('.recent-work-item__overlay').addClass('show-none');
});
});
Here look at my codepen

Here I have added an example that shows how you could use CSS to show/hide elements. It might not give you exact answer to your problem, but it will help you change your stylesheets as per your requirement.
Essentially, as per the discussion in comments, I don't think you need javascript to design the page the way you need it.
.container {
padding: 10px;
border: 1px solid gray;
}
.container > .hideOnHover {
display: block;
}
.container > .showOnHover {
display: none;
}
.container:hover > .hideOnHover {
display: none;
}
.container:hover > .showOnHover {
display: block;
}
<div class="container">
<div class="hideOnHover">
This text will be hidden on hover.
</div>
<div class="showOnHover">
This text will be shown on hover.
</div>
</div>

After button is clicked , another button won't click

I'm trying to make a content slider just like youtube
And here is mine..
My content slides to right or left perfectly by 800px. But here's the problem.. When I click on the left icon first , Then clicking on the right icon won't work! Could there be a solution to this..?
Javascript:
$(document).ready(function(){
$("#trendingnexticon").on('click' ,function(){
$("#trendingtable").animate({right: '+=800px'});
});
});
$(document).ready(function(){
$("#trendingpreviousicon").on('click' ,function(){
$("#trendingtable").animate({left: '+=800px'});
});
});
HTML:
<div id="trendingdiv" class="" style="overflow-x:scroll; overflow: hidden;">
<table id="trendingtable" class="table" style="position:relative;">
<a id="trendingpreviousicon" style="cursor:pointer; margin-top: 62px;
position:absolute; z-index:1;" class="previous round">‹</a>
<a id="trendingnexticon" style="cursor:pointer; margin-left: 1250px;
margin-top: 62px; position:absolute; z-index:1;" class="next round">›
</a>
<tr>
<?php while ($tsingers = mysqli_fetch_assoc($tsingersquery)): ?>
<td>
<div class="media" style="border: 1px solid #e6e6e6; width:400px;
padding: 0px;">
<img src="images/<?=$tsingers['image'];?>" alt="<?
=$tsingers['name'];?>"
class="pull-left img-responsive" style="width: 200px; height:
150px;" id="artistimg">
<div id="trendingmediabody" class="media-body">
<p id="trendingname" style="font-size:14px; font-weight:
bolder;"><?=$tsingers['name'];?></p>
<p id="trendingcategory" style="font-size:12px; font-weight:
bolder;"><?=$tsingers['category'];?></p></br></br>
</div>
</div>
</td>
<?php endwhile; ?>
</tr>
</table>
</div>

The "left" and "right" attributes are conflicting.
$(document).ready(function(){
$("#trendingnexticon").on('click' ,function(){
$("#trendingtable").animate({right: '+=800px'});
});
$("#trendingpreviousicon").on('click' ,function(){
$("#trendingtable").animate({right: '-=800px'});
});
});
P.S.: I also removed the double $(document).ready since one is enough.

Heyo, you only need one $(document).ready(), you can put both functions inside that one.
Try check on the inspector to see if after the slide animation something doesn't overlap the button

I'm going to take a guess and say that it is because you are animating left and right instead of one or the other. left doesn't mean "move left", it means, "set the left CSS style property". And left means "where does my left border belong relative to my nearest relative parent".
Read a bit more about the left and position CSS properties.
Try this instead:
$(document).ready(function () {
$("#trendingnexticon").on('click', function () {
$("#trendingtable").animate({
left: '-=800px'
});
});
$("#trendingpreviousicon").on('click', function () {
$("#trendingtable").animate({
left: '+=800px'
});
});
});

how toggle all div tags

how? when click the .button, hide all .body div tags and show just closest .body tag div
my codes first one works, but when click the .button, show .body, but when click again, does't toggle ( show / hide ) that, any more?
How to do it properly?
Edit : how to change .button > span icon? ( positive or negative )
Edit : jQuery(this).find('positive').toggleClass('negative'); ?
Edit (saitho): JSFiddle: https://jsfiddle.net/nL4sxbj0/2/
HTML
<div class="box">
<div class="header">
<a href="#" class="button">
<span class="positive"></span>
</a>
</div>
<div class="body">
</div>
</div>
CSS
.body {
display:none;
}
.button .positive,
.button .negative {
width:36px;
height:36px;
float:right;
display:block;
cursor:pointer;
}
.button .positive {
background:url('../img/icon-del.png') no-repeat center center / 18px;
}
.button .negative {
background:url('../img/icon-opn.png') no-repeat center center / 18px;
}
JQUERY
jQuery('.button').on('click' ,function(e) {
e.preventDefault(); // Is this necessary? for
jQuery('.body').hide(); // Problem is hear i think
jQuery(this).closest('.box').find('.body').toggle();
});
Picture

add class iconbtn to button span
<div class="box">
<div class="header">
<a href="#" class="button">
<span class="iconbtn positive"></span>
</a>
</div>
<div class="body">
</div>
jQuery('.button').on('click' ,function(e) {
e.preventDefault();
var box = jQuery(this).closest('.box');
var closestBody = box.find('.body');
jQuery('.body').not(closestBody).hide(); // Hide all except above div
jQuery(closestBody).toggle(); // if visible hide it else show it
jQuery('.iconbtn').removeClass('negative').addClass('positive');
var iconBtn = box.find('.iconbtn');
if (jQuery(closestBody).is(':visible')) {
iconBtn.removeClass('positive').addClass('negative');
} else {
iconBtn.removeClass('negative').addClass('positive');
}
});
jsFiddle Link

The issue is that you have:
jQuery('.body').hide();
in your click callback, that means the body div is first being hidden and then toggle works as it should - it shows the div. There is no way it can hide it though, as before toggle you always first hide the div
Remove this line and it should work, check it here: JS Fiddle

Five star rating functionality

How can I achieve a five star rating functionality using css.
I have some html:
<span class="rate-this-stars">
<h5>Rate this page</h5>
<ol class="rate-this-stars-list">
<li class="star" value="5"></li>
<li class="star" value="4"></li>
<li class="star" value="3"></li>
<li class="star" value="2"></li>
<li class="star" value="1"></li>
</ol>
</span>
And some additional css which gives me this:
I then have a css hover state which swaps the grey star with a pink star:
span.stars ol li:hover {
background-image: url(../images/starHover.png);
}
Output:
So obviously this will only effect the star I hover over. But I was wonder How would I be able to highlight star 1, 2, 3, and 4 when i hover over star 4. So highlight all the stars that trial the selected.
I also want to be able to keep the stars pink if a click event is triggered. I want to basically do this with css and no javascript.
My css skills are a bit rusty. Any suggestions on how to achieve this functionality.

I Got This
Javascript to get the ratings
$(document).ready(function() {
$("form#ratingForm").submit(function(e)
{
e.preventDefault(); // prevent the default click action from being performed
if ($("#ratingForm :radio:checked").length == 0) {
$('#status').html("nothing checked");
return false;
} else {
$('#status').html( 'You picked ' + $('input:radio[name=rating]:checked').val() );
}
});
});
DEMO1
Using Css DEMO2

use mouseover event to programmatically select the rest
mouseover: function () {
var sel = this.value:
var options = $('ol li');
for (var i = 1; i < sel; i++) {
options[i].css('background-image', 'url(../images/starHover.png)')
}
}

here is little bit 'modern' example by using CSS for animations and Angular for getting the selected result.
The trick is in css on hover!
On mouse over the container, add the orange class to all stars, and apply different class (gray) to all stars after the selected one.
In your example it will look something like this
.rate-this-stars-list:hover .star{
color: orange;
}
and then all stars after selected one:
.rate-this-stars-list .star:hover ~ .star{
color: #ddd;
}
but, you can find full working 5 stars rating example with Angular implementation on this link:
https://floyk.com/en/post/angular-star-rating-example

One option for doing that is using CSS Sprite + JS.
The idea is to have all 6 possibilities (0 stars, 1 star, 2 stars, ...) and change the background position according to the position of the cursor.
If you want something simpler, just have 6 separate images and change the background image according to the mouse position.
To do that, make a container of the size of the entire image and then 5 small blocks inside this container (one for each star). Then make the JS change the container's background according to where the mouse is.
An example using JQuery and CSS sprite is here (you can easily make the JS less verbose. This is just a simple example):
http://codepen.io/anon/pen/rkhcJ
HTML
<div id="container">
<div id="1" class="star">1</div>
<div id="2" class="star"></div>
<div id="3" class="star"></div>
<div id="4" class="star"></div>
<div id="5" class="star"></div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
CSS:
.star{
float:left;
height: 100%;
width: 20%;
}
#container{
background-image: url('http://img1.targetimg1.com/wcsstore/TargetSAS/11_05_2013_06_55/images/ratings-large-sprite-r5.gif');
width: 226px;
height: 50px;
background-color: #c34;
background
}
JS
$("#1").mouseover(function(){
$("#container").css('background-position', '0px -38px');
});
$("#2").mouseover(function(){
$("#container").css('background-position', '0px -76px');
});
$("#3").mouseover(function(){
$("#container").css('background-position', '0px -114px');
});
$("#4").mouseover(function(){
$("#container").css('background-position', '0px -152px');
});
$("#5").mouseover(function(){
$("#container").css('background-position', '0px -190px');
});
$(".star").mouseout(function(){
$("#container").css('background-position', '0px 0px');
});

<style>
.star {
font-size: x-large;
width: 50px;
display: inline-block;
color: gray;
}
.star:last-child {
margin-right: 0;
}
.star:before {
content:'\2605';
}
.star.on {
color: red;
}
.star.half:after {
content:'\2605';
color: red;
position: absolute;
margin-left: -20px;
width: 10px;
overflow: hidden;
}
</style>
<div class="stars">
<?php
$enable = 5.5; //enter how many stars to enable
$max_stars = 6; //enter maximum no.of stars
$star_rate = is_int($enable) ? 1 : 0;
for ($i = 1; $i <= $max_stars; $i++){ ?>
<?php if(round($enable) == $i && !$star_rate) { ?>
<span class="<?php echo 'star half'; ?>"></span>
<?php } elseif(round($enable) >= $i) { ?>
<span class="<?php echo 'star on'; ?>"></span>
<?php } else { ?>
<span class="<?php echo 'star'; ?>"></span>
<?php }
}?>
</div>

I found a lot of the answers overly complex, so I made a single page HTML/JavaScript demo:
https://github.com/zamicol/rating

Making a div transition slower into a new dimension with jQuery

I think a jsfiddle will illustrate the problem much better: http://jsfiddle.net/9mHk2/
I'm trying to get the wrapping div to transition into the new width with a slide/fade/something rather than snap into it.
What is the simplest way to do this?
<div style="border:1px solid #000000; padding:8px; float:right;">
Here is a div with some text <span id="spn1">....</span>
</div>
<br /><br /><br />
<center>
<input id="btn1" name="btn1" type="submit" value="Hide" />
</center>
$('#btn1').click(function (e) {
e.preventDefault();
$('#spn1').fadeOut('500');
});

Seems like you want to hide the ellipses and then slowly animate the rectangle, correct? You can do this by calculating the width before and after the span is hidden and then animate it:
$('#btn1').click(function (e) {
e.preventDefault();
// Here's the width before the span is hidden
var originalWidth = $('#rectangle').width();
$('#spn1').hide();
// Here's the width after the span is hidden
var newWidth = $('#rectangle').width();
// Now animate the difference!
$('#rectangle').css('width',originalWidth).animate({width: newWidth}, 1200);
});
FIDDLE

Here is a different approach than user1506980's, hide the span using width animation. Requires some extra CSS.
#spn1 {
overflow: hidden;
display: inline-block;
margin: 0;
padding:0;
height: 1em;
}
$('#btn1').click(function (e) {
e.preventDefault();
$('#spn1').animate({width:0},500).fadeTo(500,0);
});
jsFiddle