Je veux changer l'image d'arrière-plan d'un élément div sur la souris sur la souris et la souris. De plus, lorsque l'élément div est actif, il ne faut utiliser qu'une seule image. Peut-il être atteint par jQuery ou javascript?
ci-dessus est le code HTML qui a tous les trois éléments avec le même nom de classe, mais j'ai ajouté une image personnalisée au lieu d'une icône p>
p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">
<div class="how-app-work-content-wrap">
<div class="title">
<h3>How are we different?</h3>
</div>
<!-- /.title -->
<div class="how-app-work-content" id="how-app-work-slider-pager">
<a href="#" class="pager-item active" data-slide-index="0">
<div class="single-how-app-work ">
<div class="icon-box">
<div class="inner">
<i class="far fa-thumbs-up"></i>
</div>
<!-- /.inner -->
</div>
<!-- /.icon-box -->
<div class="text-box">
<h4>Be Independent</h4>
<p>We use a customized application tobe <br /> specifically designed a testing gnose <br /> to keep away for people.</p>
</div>
<!-- /.text-box -->
</div>
</a>
<!-- /.single-how-app-work -->
<a href="#" class="pager-item" data-slide-index="1">
<div class="single-how-app-work">
<div class="icon-box">
<div class="inner">
<i class="far fa-handshake-o"></i>
</div>
<!-- /.inner -->
</div>
<!-- /.icon-box -->
<div class="text-box">
<h4>Own Your Customer</h4>
<p>We use a customized application tobe <br /> specifically designed a testing gnose <br /> to keep away for people.</p>
</div>
<!-- /.text-box -->
</div>
</a>
<!-- /.single-how-app-work -->
<a href="#" class="pager-item" id="custom_image" data-slide-index="2">
<div class="single-how-app-work ">
<div class="icon-box">
<div class="inner" id="inner_id">
<!-- /.inner <i class="fas fa-dollar-sign"></i>-->
<img src="img/no-dollar_blue.png" id="no_hover" style="width:52px;height:58px; padding-top:12px;"></img>
</div>
<!-- /.inner -->
</div>
<!-- /.icon-box -->
<div class="text-box">
<h4>No Commission</h4>
<p>We use a customized application tobe <br /> specifically designed a testing gnose <br /> to keep away for people.</p>
</div>
<!-- /.text-box -->
</div>
</a>
<!-- /.single-how-app-work -->
</div>
<!-- /.how-app-work-content -->
<a href="https://itunes.apple.com/us/app/bizzalley/id1087241798?ls=1&mt=8" class="download-btn active">
<i class="fab fa-apple"></i>
<span class="inner"> <span class="avail">Available on</span> <span class="store-name">App Store</span></span>
</a>
<a href="https://play.google.com/store/apps/details?id=com.wildnet.bizzalley" class="download-btn">
<i class="fab fa-google-play"></i>
<span class="inner"><span class="avail">Available on</span> <span class="store-name">Google play</span></span>
</a>
</div>
<!-- /.how-app-work-content-wrap -->
</div>
<!-- /.col-md-6 -->4 Réponses :
Veuillez utiliser CSS3 pour obtenir le résultat souhaité, c'est simple et efficace.
p>
<div class="myclass"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
Il n'y a pas besoin d'utiliser jQuery ou JavaScript. Vous devriez faire ce fait avec CSS.
Ce que vous avez à faire est: P>
- changez votre
img code> dans undiv code> avec une image de fond li>- Sélectionnez votre
#custom_image code> qui estpas fort> .acacacer code> en utilisant#custom_image: non (.active) code> li>- ajoutez un survol fort> a> à son enfant
#no_hover code> en utilisant#no_hover: survol code> li> ul>Ce qui signifie le sélecteur CSS suivant:
#custom_image: non (.active) #no_hover: survol code>. P>. blockQuote>
Pour changer l'image si
#custom_image code> est.active code>, vous devez sélectionner l'enfant#no_hover code> #no_hover code> de#custom_image code> qui est.active code>. P>Vous obtiendrez cela en utilisant
# personnalisé_image.active #no_hover code> p> blockQuote>p>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <!-- for example only --> <button id="toggle-active">Toggle Active</button> .pager-item is <span id="active-info" style="font-weight: bold; color: red;">not active</span> <hr /> <a href="#" class="pager-item" id="custom_image" data-slide-index="2"> <div class="single-how-app-work "> <div class="icon-box"> <div class="inner" id="inner_id"> <i class="fa fa-stack-overflow"></i> </div> <!-- /.inner --> </div> <!-- /.icon-box --> <div class="text-box"> <h4>No Commission</h4> <p>We use a customized application tobe <br /> specifically designed a testing gnose <br /> to keep away for people.</p> </div> <!-- /.text-box --> </div> </a>
En réalité, en cliquant sur l'élément, il change une image à l'autre de cela, ce serait un problème si j'utilise une autre fonction sur clic pour le même élément?
Si je vous ai raison, cela ne devrait pas être un problème, car ceci n'est pas onclick , c'est une stationnaire CSS. Vous pouvez ajouter un onclick à l'élément sans perdre cette survol. Si je vous trompe et sa question ou une autre question ou sujet, vous devriez l'essayer et si vous êtes bloqué, vous pouvez ouvrir une nouvelle question.
Votre solution fonctionne bien, mais il y a un petit problème que je suis confronté actuellement. Avec la classe étant inactive si je vols sur l'élément, il change sur la "Y", mais sur la souris, il reste l'image "y" où comme il le doit par défaut restent comme x image x. Mais quand la classe est active, tout va bien
Dans votre question, vous nous avez dit que vous souhaitez survoler une image uniquement si le parent n'est pas .active . Donc, si le parent n'est pas .acacacacer il en vaillir de X à Y (point de navigation tandis que la souris est terminée, il passe donc à la souris si la souris sort) et si le parent est < Code> .active rien ne se passe, l'image est toujours la même. Ou voulez-vous que l'image soit Y au lieu de X si le parent est .acacacer ? (Pour une meilleure compréhension X est gris et y est bleu dans mon exemple.)
Oui, exactement. Lorsque le parent n'est pas actif, l'image par défaut doit être x puis sur la souris survol, elle devrait être Y. Si le parent est actif, l'image doit passer à Y, même s'il y a une souris ou une souris sur l'image doit être Y.
Édité ma réponse, sa seule règle de plus de CSS. Dans ce cas pour # personnage_image.active #no_hover
Salut @ j.Sadi merci de demander. Je l'ai essayé mais l'image X par défaut lorsque la classe est inactive ne s'affiche pas à l'intérieur de l'élément div. Je pense donc à convertir l'image en icône de Fontaweome, puis appliquez le CSS. Cela sera-t-il une solution de contournement réalisable?
Avez-vous exécuté la codesNippet ici dans le débordement de la pile? Pour moi, l'image par défaut lorsque la classe est inactive s'affiche ... pourrait-il être que votre problème est que chaque élément n'a pas l'identifiant #custom_image ? Même si vous définissez cet identifiant sur chaque élément, cela ne fonctionnerait pas parce qu'un identifiant doit être unique. Dans ce cas, veuillez remplacer chaque #custom_image à l'intérieur de mon CSS fourni avec .pager-item . Cela devrait fonctionner.
Ummm ouais je l'ai essayé @ j.Sadi et votre solution est très utile, mais dans mon projet, il y a une division circulaire avec un fond blanc et à l'intérieur que je dois mettre une image avec une couleur bleue puis sur le planer, il devrait remplacer à l'image blanche. Comme le cercle sera rempli de couleur bleue. Mais votre solution a résolu mes 99% du problème, mais la solution que j'ai préférée à nouveau l'image en icône.
@Mustafabizzalley Pour moi, il n'était pas clair dans votre question que vous souhaitez changer la couleur d'une icône, mais la conversion ne devrait pas être un problème. J'ai ajouté un exemple en utilisant des icônes géniales de police sous le premier extrait. J'ai également changé le CSS de l'IDS en noms de classe. Si vous aimez en savoir plus sur CSS, vous devriez donner Codecademy a essayez. c'est gratuitement. :)
CSS uniquement fort> p>
<div class="main-div"></div>
Veuillez envisager d'ajouter une brève explication de ce que vous avez fait pour que l'auteur de la question puisse mieux comprendre votre solution.
Vous n'avez pas besoin d'utiliser une jQuery pour obtenir ce que vous voulez, il peut tous être fait via CSS à l'aide du Voici un exemple. .. où comme normal, il sera rose, avec une survolée sur son bleu clair ... alors si vous cliquez sur la case Cochez la case, il ajoutera la catégorie jQuery est utilisé uniquement pour ajouter / supprimer la classe, mais tout le reste n'est que CSS ... P> p> : plancher code> pseudoclass et le nom de la classe. ActiveClass CODE> Classe au Code> de sorte que comme étant normal, il sera rouge, avec un survol, il est bleu normal. p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="changeClass" /><br/>
<div id="myDiv">
Hello World
</div>
Sonner comme il serait plus logique de simplement utiliser CSS
Bonjour, pourriez-vous s'il vous plaît fournir un HTML aussi?
@FreeFalder J'ai déjà essayé d'utiliser CSS mais ne fonctionne pas ... ajouté CSS pour la souris sur et la souris et pour la classe active aussi bien mais toujours sans résultat
Peut-être pas de sujet, mais la fixation d'un intervalle à 1 milliseconde semble toujours comme si vous allez une mauvaise direction. Le minimum du navigateur est de 10-15ms de nos jours (fin de 2019).
@Mustafa - alors tu as tort de votre CSS. Aurait été préférable de demander pourquoi cela ne fonctionnait pas, que de descendre une route complètement différente (et moins acceptable)
@FreeFalder Je pensais utiliser Java Script chercherait un certain résultat car la classe active est ajoutée de manière dynamique et le dernier élément lorsque la sélection ajoutait la classe active et la souris après la navigation de la souris doit être x. Et s'il n'y a pas de classe active, l'image doit être x sur H sur et y sur la souris.
@Mustafabizzalley S'il vous plaît jeter un coup d'œil à ma réponse, cela devrait faire exactement ce que vous voulez. N'hésitez pas à commenter ma réponse s'il y a des questions.