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.

Answer 1

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.