Question

这是我试过的CSS：

$('#navlist').find('#left-arrow').hover(function() {
    $(('#navlist').find('#left-arrow')).css('transform', 'translate(200px) rotate(180deg)');
});

我应该使用jquery来执行旋转吗？

以下是我的尝试：

    //select all siblings with same value in third column
     thisTR.siblings().filter(function() {
          if ($('td',this).eq(2).text() == $('td', thisTR).eq(2).text() ) {

               var tds = $(this).find('td');
                console.log($(this));
                var tr =$("<tr/>");
                tr.append("<td>" + tds.eq(0).text() + "</td>");
                tr.append("<td>" + tds.eq(1).text() + "</td>");
                tr.append("<td>" + tds.eq(2).text() + "</td>");
                tr.append("<td>" + tds.eq(3).text() + "</td>");
                tr.attr('id', id.substring(4));
                $('#selected_users').append(tr);                                
                };
    });

Answer 1

你正在浮动你的CSS左边的箭头，向右浮动，它应该在你想要的地方结束。

Answer 2

试试这个......

$(document).ready(function(){       
        $('#navlist').hover(function() {
        //do something with this below
            $('#navlist').find('#this').css('transform', 'translate(100px) rotate(100deg)');
        });
    });

完整的HTML代码如下......

<!Doctype html>
<html>
    <head>
        <style>
            #navlist
            {
                height:60px;
                background-color:#000;
            }
            #this
            {
                height:30px;
                background-color:#f00;
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

        <script >
        $(document).ready(function(){       
            $('#navlist').hover(function() {
            //do something with this below
                $('#navlist').find('#this').css('transform', 'translate(100px) rotate(100deg)');
            });
        });
        </script>
    </head>
    <body>
        <div id="navlist">
            <div id="this">

            </div>
        </div>
    </body>
</html>

阻止css向后旋转

2 个答案: