Css in all divs generated by php / mysql

0

How to do when the mouse enters the div it increases the opacity to 1.0 and when it exits the div back to the 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 one. I tried

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

But it did not work ... I'm waiting ...

    
asked by anonymous 18.05.2014 / 20:01

2 answers

4

To add CSS to dynamically generated elements, you have two options:

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

So in PHP add the class newElement

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 CSS: .newElement{ opacity: 1;}

# 2 - run the code you used above right after the elements have been added, ie within the onSuccess function of ajax

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

Note: ID's must be unique. In your while in PHP it gives idea that you are using the same ID. This gives errors in the code, the most common rule being only applied to the first element that has the ID that 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 you can add a counter that adds an extra number to your ID. But to give you an exact example, I need to know more about how you use ajax.

EDIT:

After you have seen your answer, I noticed that the board was wrong (now corrected) and that you need to use event delegation because the event handler was run before the html was on the page. Then use this:

$(document).on('mouseenter', '.div', function () {
    $(this).css("opacity", 1);
});
$(document).on('mouseleave', '.div', function () {
    $(this).css("opacity", "0.8");
});
    
18.05.2014 / 20:04
0

I was able to do this:

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;
}
    
18.05.2014 / 20:20