Test (v5)

Revision 5 of this benchmark created on

Preparation HTML

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

<div class="home-images">


<div style="background-color: rgb(1, 115, 199);" dp-action="change-bg-on-hover alert" class="dpaction-change-bg-on-hover dpaction-alert home-image  " data-tlredirect="/import/list" data-tlclearcache="False" data-href="/import/list" title="Import">
    <img src="/Content/Images/home.import.png">
    <div class="title">Import</div>
</div>

<div style="background-color: rgb(1, 115, 199);" dp-action="change-bg-on-hover alert" class="dpaction-change-bg-on-hover dpaction-alert home-image  " title="TileA">
    <img src="/Content/Images/TileA.png">
    <div class="title">TileA</div>
</div>

<div style="background-color: rgb(1, 115, 199);" dp-action="change-bg-on-hover alert" class="dpaction-change-bg-on-hover dpaction-alert home-image  " title="TileB">
    <img src="/Content/Images/TileB.png">
    <div class="title">TileB</div>
</div>

<div style="background-color: rgb(1, 115, 199);" dp-action="change-bg-on-hover alert" class="dpaction-change-bg-on-hover dpaction-alert home-image  " title="TileC">
    <img src="/Content/Images/TileC.png">
    <div class="title">TileC</div>
</div>

<div style="background-color: rgb(1, 115, 199);" dp-action="change-bg-on-hover alert" class="dpaction-change-bg-on-hover dpaction-alert home-image  " data-tlredirect="/export/list" title="TileD">
    <img src="/Content/Images/TileD.png">
    <div class="title">TileD</div>
</div>    </div>

Test runner

Ready to run.

Testing in
TestOps/sec
css selector
$('.dpaction-change-bg-on-hover').hover(
    function() {
        $(this).css('background-color', '#002e4f ');
    },
    function() {
        // Change background color back to initial on hover out
        $(this).css('background-color', '#0173C7');
    }
);
ready
attribute selector
$("[dp-action~='change-bg-on-hover']").hover(
        function() {
            $(this).css('background-color', '#002e4f ');
        },
        function() {
            // Change background color back to initial on hover out
            $(this).css('background-color', '#0173C7');
        }
    );
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.