add remove elements on hover

Question

У меня есть элемент <ul>, для каждого <li> У меня есть элемент <img>, потому что там я хочу создать навигационные стрелки, которые появляются только при наведении указателя мыши.
у меня есть два варианта дальнейших действий: создание/удаление элементов с помощью JQuery .hover(): Demo или оставить элементы там в HTML части с дисплеем нет, и использовать CSS для изменения отображения, чтобы блокировать на парения псевдо зная, что у меня есть так много элементов <li>, чем то, что я на самом деле представлял в демо.
Каков наиболее эффективный способ сделать это?
в терминах загрузки ОЗУ, быстроты ответа процессора.
в терминах также последствий для манипуляций с DOM и стандартов W3C или самого чистого способа, если вы в порядке.

Answer 1

CSS будет более эффективным. Нравится

li img { 
    display: none; 
} 

li:hover img { 
    display: block; 
}