Блог

Главная - Вопросы по программированию - Прозрачное наведение работает на JSFiddle, но не на веб-сайте

Прозрачное наведение работает на JSFiddle, но не на веб-сайте

#html #css

#HTML #css

Вопрос:

Я решил создать JSFiddle, чтобы показать вам, ребята, что было не так, но в итоге это сработало, я использовал точно такой же код, но он по-прежнему имеет непрозрачность 1 при наведении курсора на веб-сайт. Я загрузил то, что у меня есть на данный момент на моем сайте, чтобы показать, что я имею в виду. Вот JSFiddle и html-код.

 <div class="wide-col gjw">
    <div class="portfolio-info">
        <p class="portfolio-title">GJW Website v1.0</p>
        <p class="portfolio-desc">The first version of my portfolio website</p>
        <a class="portfolio-button" href="#">View Brief</a>
    </div>
</div>

JSFiddle делает то, что я хочу, чтобы он делал, имея прозрачный цвет наведения. Теперь, когда у меня есть тот же код на моем веб-сайте, непрозрачность полная, как показано здесь

Я не понимаю, почему это будет сделано не на моем сайте, а на скрипке? Я не думаю, что есть какой-то другой код, который мешает этому…

Заранее приветствую вас

Ответ №1:

opacity Указанный .gjw:hover .portfolio-info параметр переопределяется некоторыми скриптами на вашем веб-сайте.

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

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

либо удалите / исправьте скрипт, либо примените !important ключевое слово, чтобы предотвратить это.

 .gjw:hover .portfolio-info {
   opacity: 0.9 !important;
   ...
 }

Веб-консоль и ее функция проверки элементов — ваши друзья…

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

1. Спасибо, но в моем скрипте не было где указано непрозрачность: 1; что странно, хотя в элементе проверки указано непрозрачность: 1;

2. @Gereth Chrome inspector показывает, какой файл и номер строки искать рядом с селектором.

3. Просто бегло взглянув на свою веб-страницу, вы сразу же увидите строку <script></script> с указанным кодом. (прямо перед концом тела)

Метки: ,