Bonjour, j'aimerais apprendre le langage sass mais il se trouve que je suis tombé sur un petit soucis que voici. J'ai codé de manière à obtenir deux div superposé, contenant une image en background chacunes et lorsque je place mon curseur sur la première div visible on peut apercevoir la deuxième div dans un petit cercle que forme le curseur. Lorsque je rétrécis la page verticalement, l'image en background "cachée", se déplace et n'est plus en accord avec la div visible. Désolé pour la formulation de mon problème, peut-être comprendrez vous mieux en vous présentant mon code.

HTML:

<div id="transition">
        <div class="present">
             <div class="cursor"></div>
        </div>  
</div>  

#transition{
    .present{
        position: relative;
        z-index: 1;
        overflow: hidden;
        width: 250px;
        height: 250px;
        background: $color-primary url(../img/moi-anime.png);
        background-size: 250px auto;
        background-repeat: no-repeat;
        cursor: none;
        border-radius: 30%;
        border: 2px solid $color-primary;
        .cursor{
            position: absolute;
            width: 100px;
            height: 100px;
            border: 4px solid $color-primary;
            border-radius: 50%;
            cursor: none;
            &::before{
                content: '';
                position: absolute;
                width: 100px;
                height: 100px;
                border-radius: 50%;
                background: $color-primary url(../img/moi-real.png);
                background-size: 250px auto;
                background-attachment: fixed;
                background-repeat: no-repeat;    
            }
        }
    }
}

JS:

$(document).ready(function button(){
    $(document).mouseout(function(){
        $('.cursor').css("display","none");
    })
    $(document).mouseover(function(){
        const cursor = document.querySelector('.cursor');
        const bloc = document.querySelector('.present');

        bloc.addEventListener('mousemove', e => {
        cursor.setAttribute('style', 'top:'+(e.pageY - 25)+"px; left:"+
        (e.pageX - 25)+"px;")
        })
    })
});

Merci pour votre aide, je reste à votre disposition si vous avez des questions

-
Edité par Khornac 29 décembre 2021 à 13:33:02

Bonjour,

Le message qui suit est une réponse automatique activée par un membre de l'équipe. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Merci de colorer votre code à l'aide du bouton Code

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: xml;">Votre code ici</pre>.

Merci de modifier votre message d'origine en fonction.

Liens conseillés

• Charte de bonne conduite
• Règles générales du forum