onmouseover event to change css of another element -both with the same dynamic ID

Question

I had image elements coming from a for loop, and an X in the upper right hand corner that deletes them from the DB.

I decided to make it so that clicking the image would delete it instead. After that, I lost the X altogether, but it occured to me that it might be a better user experience if the X showed back up onmousover to indicate that the image would be deleted (still not sure if I'm going with opacity 0 -> opacity 1 or white -> red).

So here's my image:

<div class="close"><i id="<?php echo $images[$i]->id; ?>" class="fas fa-times"></i></div>
<img id="<?php echo $images[$i]->id; ?>" onclick="delete_img(this.id);" onmouseover="show_x(this.id)" src="https://drive.google.com/thumbnail?id=<?php echo $images[$i]->image_id; ?>&export=view&sz=w250">

And my jquery

function show_x(id)
{
  $("#" + id).css("color", "red");
}

Relevant CSS:

.fas
{
    color: #ffffff;
}

It really feels like this should work, but it doesn't. I know I'm getting into the function, because I can write:

alert(id);

And it does exactly what I expect. I know jQuery is functioning properly, because the other jQuery function delete_img(id) works just fine.

Any insight is appreciated. If this is a stupid question, please forgive me, because I know not what I do.

I also tried giving them different ID's..something like adding "x_" to the Font Awesome div ID, and ammending the jQuery like this:

function show_x(id)
{
  $("#x_" + id).css("color", "red");
}

But that didn't work either.

Taplar, see this:

<i class="fas fa-times <?php echo $images[$i]->id; ?>" style="color: white;"></i>

and

function show_x(id)
{

  $("."+id).css("color", "red");
}

Apologies for making invalid web markup, but this also doesn't seem to work.

Unrelated to the specific question, but you should know about the shortcode `=$variable?>` that may replace ``. Great for readability :) maybe you can create a fiddle to demonstrate this? — Itay Ganor, Aug 22 '18 at 21:21
Possible duplicate of [Does ID have to be unique in the whole page?](https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page) — Taplar, Aug 22 '18 at 21:28
Use a class instead of duplicating an id and making invalid markup by web standards. — Taplar, Aug 22 '18 at 21:28
@Taplar are you suggesting something like the newest edit? (at the bottom) — Christian, Aug 22 '18 at 21:33
@Taplar that did not work, nor does prefacing the x's ID with "x_" to make it unique. — Christian, Aug 22 '18 at 21:34
@ItayGanor, I'm using a Font Awesome icon, and I'm not sure if I can use those in a fiddle, but it should be something like this: https://jsfiddle.net/bdu5an70/6/. I expect the X to change to red when I hover over the image. — Christian, Aug 22 '18 at 21:36
@Christian Not. You cannot add your function inside the dom ready. It needs to be global (add script at the end of body)! — gaetanoM, Aug 22 '18 at 21:45
@gaetanoM you're right, that was my bad when I created the fiddle. My real script is global though, and it still isn't working. It's also getting into the function just fine, as I said, it alerts the ID when I tell it to. — Christian, Aug 22 '18 at 22:14

joshmoto · Accepted Answer · 2018-08-22T22:01:49.637

0

You could use CSS to target the close icon rather relying on jQuery.

If you ditch the mouseover function, and modify the gallery code a bit so the delete_img() function is on a tag containing the img, like an anchor tag for example <a href="#">. This way you can achieve revealing the delete icon just using CSS.

You may have to modify your delete_img() function to accommodate.

See example below...

a {
  display: block;
  position: relative;
  float: left;
}

a > .fas {
  transition: opacity 0.15s ease-in-out;
  opacity: 0;
  position: absolute;
  top: 20px;
  left: 20px;
  color: white;
  z-index: 2;
}

a:hover > .fas {
  opacity: 1;

}

a:after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: black;
  opacity: 0;
}

a:hover:after {
  opacity: .5;
}

img {
  display: block;
}

<a
   id="image-1"
   href="#"
   onclick="delete_img(this.id);"
>
  <i class="fas fa-times">close icon</i>
  <img src="https://i.imgur.com/JJLSCq0.png"/> 
</a>

Just remember to add event.preventDefault(); on the delete_img() function. I would also avoid using the onclick in your html. and just write it in your script.

edited Aug 22 '18 at 22:01

answered Aug 22 '18 at 21:50

joshmoto

4,472
1
26
45

But does something like this work inside a loop with either a dynamic ID or class? Won't hovering over one image make all of the X's appear if we're just dealing with CSS? – Christian Aug 22 '18 at 22:04
Yeah of course. See this fiddle, these all have dynamic IDs. https://jsfiddle.net/joshmoto/ryo8fwz0/ In the css, I am targeting only `.fas` inside the `a` tag by writing it like this.. `a:hover .fas` that means only the `.fas` icon inside the current hovered `a` tag will be targeted. Just gotta make sure everything is nested properly. Happy to go to chat mode if you need help. – joshmoto Aug 22 '18 at 22:17
1

you've done more than enough mate. Thanks so much! This looks perfect. – Christian Aug 22 '18 at 22:22
No worries. Good luck! – joshmoto Aug 22 '18 at 22:24
Also avoid `id` with the same value twice as it wont technically be valid html :) – joshmoto Aug 22 '18 at 22:27

onmouseover event to change css of another element -both with the same dynamic ID

1 Answers1