Apply hover statement to this item from php value?

Question

I'm having some post in php, my table is configuring like this:

while ($row = mysql_fetch_array($res, MYSQL_ASSOC)) {
    $id = $row['id'];
    $title1 = $row['title1'];
    $thumb = $row['thumb'];
    $link = $row['link'];
    $hex = $row['hex'];
    $archiveID= $row['archiveID'];
    $recordListingID= $row['recordListingID'];
    ?>

With that, each item have a specific image, color, etc

Which I display int he front-end like that:

<div id="artist-image">
<img src="<?php echo $thumb ?>"></img>         
</div></a></li>
<?php
}
?>

On hover a title, the image of the post display, using jquery:

$('#artistlistdesktop ul li a').hover(function(){
      $(this).children('#artist-image').toggleClass('active');|

It's all working fine, but what I'm trying to achieve is on hover a title, to change the color of the title with the hex color assign previously in php via $hex = $row['hex'];

I tried the following css:

#artistlistdesktop li > a:hover{
  color:#<?=$hex?>;;
}

but it's changing into the same color to all the list instead of the color assign.

Do you know how can I achieve this?

----EDIT ----

original color is light grey which is this css:

#artistlistdesktop li > a {
display: block;
text-decoration: none;
font-family: Arial Black, Arial, Helvetica, sans-serif;
color: rgba(146,146,146,0.5);
font-weight: bolder;
line-height: 35px;
font-size: 53px;
letter-spacing: -5px;
padding: 0;
margin: 0;

}

--EDIT 2 --

I got it via:

<li><a onMouseOver="this.style.color='#<?php  echo $hex ?>'"    
  onMouseOut="this.style.color='rgba(146,146,146,0.5)'"

id="" target="_blank" href=" ">

Erwan Bonniot · Answer 1 · 2017-06-12T09:34:09.567

0

You should apply style=":hover{color: #<?=$hex?>;}" in your object !

edited Jun 12 '17 at 09:34

answered Jun 12 '17 at 09:28

Erwan Bonniot

1
2

Thanks erwan, It's on hover of the title that i d like to change the color...I tried the following:
withotu successs, any idea ? Thanks !

thebigE

Jun 12 '17 at 09:36

@thebigE it seems you are missing a space before the style attribute – Goran Stoyanov Jun 12 '17 at 09:42

@GoranStoyanov not sur to see where ? – thebigE Jun 12 '17 at 09:52

still not working :( – thebigE Jun 12 '17 at 09:58

This was only a useful remark that I wanted to make. Why is not working you can read here https://stackoverflow.com/questions/1033156/how-to-write-ahover-in-inline-css – Goran Stoyanov Jun 12 '17 at 10:01

Goran Stoyanov · Answer 2 · 2017-06-12T12:32:58.347

0

First of all, img is a self-closing tag. Check example here.

What's more, are you sure that the $hex value is a string?

I've tested and it seems to be working like that:

<?php
$id = 1;
$link = "http://example.com";
$title1 = "This is a link";
$hex = "ff0000";
?>

<style>
li > a:hover{
  color:#<?=$hex?>;
}
</style>

<li><a id="<?php echo $id ?>" target="_blank" href="<?php echo $link ?> "><?php echo $title1 ?></a></li>

EDIT: https://jsfiddle.net/goran90/z1e7d3mv/1/ - Here's an alternative for what you are trying to achieve. Although, it's not a best practice, but in your case it should do the trick. You only need to set a data attribute with the corresponding color for each a element.

edited Jun 12 '17 at 12:32

answered Jun 12 '17 at 10:10

Goran Stoyanov

2,311
1
21
31

Thanks Goran, i'm still having the same happening - on hover, I'm having the same color to all the items . .. it's not hovering the color from the current item 9 example ID1 have an hex orange, ID2 a blue color, ID 3 a red color. At the moment when I hover the items, it's becoming orange for all the IDs..... I hope it make sense ? Really appreciate your time btw ! – thebigE Jun 12 '17 at 10:20
And Orange is the default color for all items, correct? Can you share only the CSS code for element with id `#artistlistdesktop` and its containing elements? – Goran Stoyanov Jun 12 '17 at 11:26
Hi Goran, no, orange is just the hex value of one of the items ID , – thebigE Jun 12 '17 at 12:09
its being red on hover, its not taking the value from the DB :( – thebigE Jun 13 '17 at 08:52
@thebigE and how do you set the `data-hex` attr with PHP? If you didn't do it correctly, this is the problem :) – Goran Stoyanov Jun 13 '17 at 13:39
I dont manage to have it work . . .. . the data attri for the data-hax is like ': $row['hex'];' i believe the problem come form that line in the js: ' $(this).css("color", "rgba(146,146,146,0.5)"); ' – thebigE Jun 16 '17 at 10:40
Nope, it's not. rgba(146, 146, 146, 0.5) is a gray color, same as the one you set in the css. I'm pretty sure you are missing something, can you share the output of the page - all of the css, html and js so I can help. – Goran Stoyanov Jun 16 '17 at 17:13

Apply hover statement to this item from php value?

2 Answers2