Блог

Главная - Вопросы по программированию - Отобразить 3 фоновых URL-адреса для 3 разных классов div

Отобразить 3 фоновых URL-адреса для 3 разных классов div

#css

#css

Вопрос:

Я пытаюсь отобразить три разных фоновых изображения (которые при наведении курсора мыши превращаются в GIF) в 3 разных divs, все с разными именами классов. По сути, последние два работают должным образом, а первый вообще не отображается. Код, отображаемый ниже. Я пытался присвоить первому идентификатор, он все равно не отображается. Я пытался поместить селектор first .recipe последним в CSS, он все равно не отображается. После изучения специфики CSS я подключил кучу селекторов, чтобы повысить его специфичность. Возможно, что-то за пределами этого блока кода мешает этому? Я проверил, что div не работает (.recipe), и действительно, я вижу, что правила к нему не применяются, я просто не могу определить почему, и почему применение к нему идентификатора не решает проблему. Я был бы признателен за любые мысли. Заранее спасибо

 .recipe{
        height: 200px;
        width: auto;
        background: url("https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1amp;auto=formatamp;fit=cropamp;w=750amp;q=80");
        margin:1em; 
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        transition: transform .2s;
    }
    
.recipe:hover {
        cursor:pointer; 
            background:url('https://github.com/dkennedy533/Recipes/blob/gh-pages/Recipes Demo.gif?raw=true');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
            transform: scale(1.38); 
    }

.gif2 {
    height: 200px;
    width: auto;
    background: url("https://neilpatel.com/wp-content/uploads/2017/08/colors.jpg");
    margin:1em; 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    transition: transform .17s;
}

.gif2:hover {
    cursor:pointer; 
    background:url('https://raw.githubusercontent.com/dkennedy533/Color-Guessing-Game/master/Color Game GIF.gif');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    transform: scale(1.4); 
}

.gif3{
    height: 200px;
    width: auto;
    background: url("https://img.nbc.com/sites/nbcunbc/files/images/2016/1/19/MDot-TheOffice-640x360-MP.jpg");
    margin:1em; 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    transition: transform .17s;
}

.gif3:hover {
    cursor:pointer; 
    background:url('https://github.com/dkennedy533/The-office/blob/master/office reording.gif?raw=true');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    transform: scale(1.4); 
}  
 <div class="inner">
        <h1>Projects</h1>
        <p>Hover over the sections below to preview the application. Click to visit the app.</p> <hr>
        <div class="features"> 

            <h2>Recipe Search Engine</h2>
            <p>React, Node.JS, CSS, Public API used for database</p>
            <a href="https://dkennedy533.github.io/Recipes/">
            <div class="recipe">
                
    
                </div></a><hr>      

            <h2>Color Guessing Game</h2>
            <p>HTML, CSS, JS, JQuery</p>
            <a href="https://dkennedy533.github.io/Color-Guessing-Game/" target="_blank">
                
                <div class = "gif2" >

                </div></a><hr>
    
            <h2>The Office Quotes</h2>
            <p>HTML, CSS, JS</p>
            <a href="https://dkennedy533.github.io/The-office/" target="_blank">

                <div class ="gif3" >
            

                </div></a><hr>              
        </div> 
    </div>

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

1. ваш код работает хорошо. по крайней мере, здесь

2. Вы правы. Это должно указывать мне, что проблема находится за пределами предоставленного мной фрагмента и где-то еще в программе. Спасибо, что указали на это. Я просто не уверен, что еще в программе повлияет только на первый div из этого списка.

3. Да, тогда проблема находится за пределами этого кода здесь. Обратите внимание на html-структуру этого места в вашем проекте. Возможно, вы пропустили тег.