Css in all php/mysql generated Ivs

Question

How to do when the mouse enters the div it increases the opacity to 1.0 and when it exits the div back to previous opacity

Example:

PHP/MYSQL

$query = mysql_query("SELECT * FROM bd) or die(mysql_error());

while ($row = mysql_fetch_array($query)) {
echo "
<table border=0 width=\"720\">
<tr id=\"div\">
<td width=\"382\">
TEXTO
</td> 
</tr></table><br><br>";
}

JS

<script>
$("#div").mouseover(function() {
$("#div").css("opacity","1.0");
});

$("#div").mouseout(function() {
$("#div").css("opacity","0.8");
});
</script>

in the second div coming from db js does not work, only in the first. tried

<script>
$("#div").mouseover(function() {
$("#div").next().css("opacity","1.0");
});
</script>

but it didn’t work......

Answer 1

To add CSS to dynamically generated elements have two options:

#1 - give this element a class and add the rules of that class to your CSS

So in PHP you add the newElement class

while ($row = mysql_fetch_array($query)) {
    echo "
    <table border=0 width=\"720\">
        <tr id=\"div\" class=\"newElement\">
            <td width=\"382\">
                TEXTO
            </td> 
        </tr>
    </table><br><br>";
}

and in the CSS: .newElement{ opacity: 1;}

#2 - run the code you used above just after the elements were added, ie within the ajax onSuccess function

success: function (data) {
    $("#esteID").css("opacity","1.0");
    // ou então no elemento parente comum: $("#parente div").css("opacity","1.0");
}

Note: Ids must be unique. In your while in PHP it looks like you’re using the same ID. This gives errors in the code, the most common rule is to be applied only to the first element that has the ID you want. If you want to use the same rules on multiple elements, then use class. If you want to generate Ids dynamically within your while can add a counter that adds an extra number to your ID. But to give you an exact example I need to know better how you use ajax.

---

EDIT:

After seeing your answer I realized that the wig was poorly made (now corrected) and that what you need is to use event delegation because Event Handler was run before html was on the page. So use it like this:

$(document).on('mouseenter', '.div', function () {
    $(this).css("opacity", 1);
});
$(document).on('mouseleave', '.div', function () {
    $(this).css("opacity", "0.8");
});

Answer 2

I got it this way:

PHP

$query = mysql_query("SELECT * FROM bd) or die(mysql_error());

while ($row = mysql_fetch_array($query)) {
echo "
<table border=0 width=\"720\">
<tr id=\"div\" class=\"div\">
<td width=\"382\">
TEXTO
</td> 
</tr></table><br><br>";
}

JS

$(".div").mouseover(function() {
$(this).css("opacity","1.0").next(".div").css("opacity","1.0");
});

$(".div").mouseout(function() {
$(this).css("opacity","0.8").next(".div").css("opacity","0.8");
});

Using css(), next() then css() again...

OR using CSS only:

#div {
opacity: 0.8;
}

#div:hover {
opacity: 1.0;
}