Для правильного вопроса надо знать половину ответа
Потому что вы написали "элемент с классом .smile, являющийся потомком элемента image с псевдослассом hover".
А надо написать "элемент с классом .smile, следующий за элементом image с псевдослассом hover".
Так не сработает, у вас input расположен внутри label, а селектор соответствует label, идущей сразу после input.
Меняйте расположение элементов и, соответственно, селекторы.
Для правильного вопроса надо знать половину ответа
content содержит строку, которая вставляется в документ именно как строка, а не как HTML-код. Экранировать надо только кавычки и обратный слэш. https://www.w3.org/TR/CSS21/syndata.html#strings
Для правильного вопроса надо знать половину ответа
Рисуете свой зал со столами в SVG, каждый стол отдельным path. Вставляете эту картинку на страницу и работаете с элементами так же, как с обычными html, привязываете обработчики событий, прописываете стили, меняете классы и т.д.
