11521 sujets

JavaScript, DOM et API Web HTML5

Jquery data price

Bonjour,je suis débutant en jquery,voilà mon probléme j'aimerais pouvoir faire apparaitre un attribut data price et description
au survol d'une gallerie d'image(prix différent pour chaque image) en haut à droite de mon site,mais je ne sais pas comment faire voici ma gallerie d'image html.

<body>



<ul>
<li class="article">
<div class="article_img">
<a href="http://lorempixel.com/800/800/abstract/1/"><img src="http://lorempixel.com/200/200/abstract/1/"/></a>
</div>
</li>


<li class="article">
<div class="article_img">
<a href="http://lorempixel.com/800/800/abstract/2/"><img src="http://lorempixel.com/200/200/abstract/2/"/></a>
</div>
</li>

<li class="article">
<div class="article_img">
<a href="http://lorempixel.com/800/800/abstract/3/"><img src="http://lorempixel.com/200/200/abstract/3/"/></a>
</div>
</li>

<li class="article">
<div class="article_img">
<a href="http://lorempixel.com/800/800/abstract/4/"><img src="http://lorempixel.com/200/200/abstract/4/"/></a>
</div>
</li>


<li class="article">
<div class="article_img">
<a href="http://lorempixel.com/800/800/abstract/5/"><img src="http://lorempixel.com/200/200/abstract/5/"/></a>
</div>
</li>

<li class="article">
<div class="article_img">
<a href="http://lorempixel.com/800/800/abstract/6/"><img src="http://lorempixel.com/200/200/abstract/6/"/></a>
</div>
</li>

<li class="article">
<div class="article_img">
<a href="http://lorempixel.com/800/800/abstract/7/"><img src="http://lorempixel.com/200/200/abstract/7/"/></a>
</div>
</li>

<li class="article">
<div class="article_img">
<a href="http://lorempixel.com/800/800/abstract/8/"><img src="http://lorempixel.com/200/200/abstract/8/"/></a>
</div>
</li>

<li class="zoomarticle">
<div class="article_img">
<a href="http://lorempixel.com/800/800/abstract/9/"><img src="http://lorempixel.com/200/200/abstract/9/"/></a></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>
$(function() {

</script>

</body>

Je vous remercie de vos conseils Smiley smile .Merci.
Modifié par Ildegan29 (14 Jan 2017 - 12:32)
merci à toi MatthieuR,je regarde tout ça et je reviendrai vers toi pour des explications,merci bcp,mon css est légérement différent du tiens puisce qu'il ressemble à ça Smiley cligne

/* css Document */

body {

max-width: 840px;
border-width: 0;
margin-left: -5px;
font-family: "HelveticaNeue",Helvetica, Arial, sans-serif;
font-weight : normal;
margin-left: 20%;
margin-right: 10%;
font-size: 93%;

}

header{
font-size: 75%;
}



div#bandeau {
width: 1155px;
height:90px;
background-color: #6793D4;
text-decoration: none;
text-indent: 10px;
margin-top: -28px;
margin-left: 5px;
margin-right: -10px;
clear:both;
}

nav {
text-align: right;
margin-top: -4px;
margin-right:22px;
margin-bottom: 0px;
position: relative; top :-2px;
position: relative; right : 0px;
font-size: 104%;
}


h1 {
font-weight: normal;
position: relative; top :35px;
position: relative; left :12px;
font-size: 217%;
}


h1::first-letter {
font-size: 124%;
}

.tiret::before{
content:'-';
margin: 0 8px;
}

div#titre {

margin-left: 23px;
padding:0 10px 0 0;
margin-top: 25px;
}

a {
text-decoration: none;
}


article {
margin-top: 39px;
}


h2 {
font-weight: lighter;
font-size: 165%;
line-height:32px;

}
h3 {

font-size: 150%;
font-weight: normal;
line-height:5px;
}

h4 {

font-size: 90%;
font-weight: lighter;
}



p{
font-size: 81%;
line-height: 17px;
margin-top: -10px;

}

.zoomarticle {
height: auto;
float: left;
margin-bottom: 0.4em;
margin-left: 0.7%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
list-style: none;
display: inline-block;
margin-top: -5px;
}




.zoomarticle {

box-shadow: 0px 0px 5px 2px #999999;
-webkit-box-shadow: 0px 0px 5px 2px #999999;
-moz-box-shadow: 0px 0px 5px 2px #999999;
transform: scale(0.90);
-ms-transform: scale(0.90);
-webkit-transform: scale(0.90);
-o-transform: scale(0.90);
-moz-transform: scale(0.90);
text-align: left;
padding: 0;

}



.zoomarticle:hover{
box-shadow:4px 4px 19px 5px #999999;

}


img:hover {
right: -5px;
top: -5px;
position : relative;
box-shadow:10px 4px 10px 23px #C9C9C9;
-webkit-box-shadow: 10px 4px 10px 23px #C9C9C9;
box-shadow: 10px 4px 10px 23px #C9C9C9;
}





.article_big_img {
width: 194px;
height: 194px;
overflow: hidden;
padding: 0px;

}


ul{
list-style-type: none;
margin-left: -12px;
}

ul li{
float: right;
margin-right: 0px;
}

ul li a{
text-decoration: none;
}


.aside {
font-weight: normal;
float:right;
margin-right: -174px;
margin-top: -515px;
font-size: 92%;
}

.aside> div{
line-height: 17px;
font-size: 91%;
}


div#bandeaubas{
width: 1155px;
height:61px;
background-color: #6793D4;
clear:both;
position: relative; bottom :-19px;
margin-left: 4px;
}
footer {
font-size: 84%;
position: absolute; bottom :25px;
position: absolute; left :12px;
text-align: left;
margin-top: 0px;
margin-left: 2px;
text-indent: 10px;
}


Merci encore Smiley smile

j'ai remplacé la classse article par zoomarticle et article_img par article big_img pr les classes

Merci encore Smiley smile
Modifié par Ildegan29 (14 Jan 2017 - 12:43)
Sujet clos
Aller à