Bryntum Quiz 6

by Alexander Novikov

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<ul class='somelist'> 
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
    <li>six</li>
    <li>seven</li>
    <li>eight</li>
    <li>nine</li>
    <li>ten</li>
</ul>

CSS

ul.somelist li:hover { color: blue }

JavaScript

/*
6. You need to add a visual effect when the user is hovering the mouse over the <li> items in the list below, how do you solve it? The <ul> list contains 10 items.

<ul class=”somelist”> 
    <li>one</li>
    <li>two</li>
    <li>three</li>
    ...
</ul>
*/

Ext.select('ul.somelist').on('mouseover', function(event, target){
    Ext.get(target).applyStyles({color: 'red'});;
}, null, {
    delegate: 'li'
});

Ext.select('ul.somelist').on('mouseout', function(event, target){
    Ext.get(target).applyStyles({color: 'black'});;
}, null, {
    delegate: 'li'
});

// Or see CSS