كيف اقوم بعمل Hover للوسم التالي ؟

في هذا المثال انت لا تستخدم الخاصية :hove مع هذا الكود.

.widget li, .BlogArchive #ArchiveList ul.flat li

وفي هذا المثال أنتَ تُريد عمل hover لعُنصرين ليس عُنصرً واحدً ﻹن:
الاول 

.widget li

والثاني 

.BlogArchive #ArchiveList ul.flat li

ذلِك لانه هناك علامة ( , ) بينهما التي تمكنك من اضافة اكثر من عنصر اي CLASS او ID الخ.. ويُنسب لهم جميعاً الخصائص التي تٌكتب داخل الاقواس المعكوفه {خصائص CSS}

هنا سأكتٌب مثال بهذا الكود يعمل مع خاصية او التأثير hover

/* هنابدون hover 
والخلفيه باللون الازرق */

.widget li,
.BlogArchive #ArchiveList ul.flat li {
    background-color:blue; /* خلفية زرقاء */
}

/* هنا نستخدم hover 
ويتم عند قرب المؤشر من هذا العنصر تغيير الخلفيه من الازرق الى الاخضر */

.widget li:hover,
.BlogArchive #ArchiveList ul.flat li:hover {
    background-color:green; /* خلفية خضراء */
}

هذة هي الإجابة والطريقه لتفعيل hover على الكود الذي طرحتة في تفاصيل السؤال.
هنا مصدر يشرح بالتفصيل كيف نستخدم :hover
http://www.w3schools.com/cssref/sel_hover.asp