Блог

Главная - Вопросы по программированию - CSS background-позиция для значка показывает мне только последний значок см. Код для более подробной информации

CSS background-позиция для значка показывает мне только последний значок см. Код для более подробной информации

#html #css #twitter-bootstrap

#HTML #css #twitter-bootstrap

Вопрос:

Это мой HTML для отображения панели значков ответа, ретвита, избранного.

 <div id="twitter-actions" style="display: none; opacity: 0; margin-top: -20px;">
   <div class="intent" id="intent-reply"><a href="https://twitter.com/intent/tweet?in_reply_to=481493696643608576" title="Reply"></a></div>
   <div class="intent" id="intent-retweet"><a href="https://twitter.com/intent/retweet?tweet_id=481493696643608576" title="Retweet"></a></div>
   <div class="intent" id="intent-fave"><a href="https://twitter.com/intent/favorite?tweet_id=481493696643608576" title="Favourite"></a></div>
</div>

Это мой CSS для отображения этой панели.

 #twitter-actions {
    width:75px;
    float:right;
    margin-right:5px;   
    margin-top:3px;
        display:none;
}
.intent {
    width:25px;
    height:16px;
    float:left; 
}
.intent a{
    width:25px;
    height:16px;
    display:block;
    background-image:url(../images/tweet-actions.png);
    float:left; 
} 
.intent a:hover{
    background-position:-25px 0px;
} 


#intent-reply a{
    background-position:0px 0px;
} 
#intent-reply a:hover{
    background-position:-25px 0px;
} 

#intent-retweet a{
    background-position:0px -17px;
} 
#intent-retweet a:hover{
    background-position:-25px -17px;
} 
#intent-fave a{
    background-position:0px -36px;
} 
#intent-fave a:hover{
    background-position:-25px -36px;
}

Это мое изображение

Проблема в том, что появляется только последний значок, я сам не смог решить проблему, поэтому прошу вас предоставить как можно больше подробностей, которые я могу вам предоставить.

введите описание изображения здесь

Обновленный пример приведенных выше HTML и CSS

Комментарии:

1. Можете ли вы опубликовать прямую ссылку? Или, может быть, попытаться воспроизвести эту проблему в codepen?

2. Кажется, у меня все работает нормально: jsfiddle.net/V8LPA HTML и CSS только для примера кажутся хорошими, возможно, вы захотите изолировать весь блок и посмотреть, что может быть противоречивым.

3. Я генерирую этот html-код из j query, и это php-файл с тем же кодом, который я взял из элемента inspect.

4. Спасибо за ваш вклад, уверен, я скоро опубликую более подробную информацию 🔜 странно, если он переопределяет, тогда он должен быть для всех элементов, но не работает только reply и retweet. Избранное работает нормально.

5. проверьте jsfiddle.net/V8LPA/3

Ответ №1:

Если это все еще не работает, я бы предложил использовать вашу функцию «Проверить элемент» (доступную в большинстве современных браузеров), чтобы увидеть, переопределяет ли какой-либо CSS то, что вы написали здесь (это будет выглядеть так), поскольку изоляция предоставленного вами кода, похоже, работает просто отлично.

Кроме того, плагины браузера могут влиять на способ отображения страницы. Особенно блокировщики рекламы. Попробуйте запустить свой браузер со всеми отключенными / выключенными плагинами и посмотрите, устраняет ли это проблему.

Комментарии:

1. Да, я пробовал проверять функцию элемента, она не переопределяется

2. Можете ли вы опубликовать ссылку на страницу? Вы можете отправить мне сообщение, если это необходимо.

3. Да, я попробовал функцию проверки элемента, она не переопределяет, если это так, это должно быть для всех элементов, где в качестве избранного все работает нормально, спасибо за ввод, я скоро опубликую весь HTML-код. 🔜.

4. Извините, это локальный хост, и в настоящее время он недоступен для меня. как только я смогу получить доступ, я опубликую его.

5. Ваш jsfiddle работает для меня во всем. Возможно, что плагин для браузера не позволяет ему отображаться правильно.

Метки: