11486 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

je dois passer par un autre langage que le CSS pour mettre en forme un site. J'ai d'abord opté pour mettre du Php dans mes pages html/CSS. Hors mes selecteurs CSS sont de types
element1:hover element2:after{}
et si j'ai bien épluché les forums, il est impossible de mettre du :after directement dans les balises avec l'attribut style="".

Donc j'ai essayé de le faire dans les balises <style> mais le code ne fonctionne pas et je ne trouve pas pour quoi :
<html><style>
.products .textHover0:hover a:after{margin-top: <?php echo nomFonction([arg1,arg2],arg1); ?>px;}
</style>
<div class="products">
<ul>
<li class="textHover0"><a href="lien1">titre lien1<img src="img1" /></a></li>
</ul>
</div>
</html>

Ma fonction Php est dans un fichier php qui est automatiquement lié.
<?php
//*Modifier la position des blocs textes d'un survol de liens
function positionTextHover ($listLinks, $nameLink) { /*Le premier paramètre de la fonction est un tableau de chaines de caractères, le second est une chaîne de caractères*/
	$rank = 0;
	for ($i=0; $i<count($listLinks); $i++) {
		if ($listLinks[$i] == $nameLink) {
			$rank = $i+1;
		}
	}
	$rank = (count($listLinks)+1) - $rank;
	$top = 41+($rank-1)*21;
	return $top; /*renvoie un entier positif > 41*/
}


Pour faire simple, la fonction renvoie un entier que j'utilise par la suite dans la propriété margin-top (en px) d'un élément (ici en :hover et :after)
Lors de mes tests, le :hover et le :after marchent mais la propriété ne prend pas la valeur donnée par la fonction en compte donc je suppose que l'appel de la fonction n'est pas bon.

De ce fait j'ai également testé en javascript
<script type="text/javascript">
function positionTextHover (listLinks, nameLink) {
	var rank = 0;

	for (var i = 0; i < listLinks.length ; i++) {
		if (listLinks[i] == nameLink) {
			rank = i+1;
		}
	}
	rank = (listLinks.length +1) - rank;
	var top = 41+(rank-1)*21;
	return top;
}
</script>
<style>
.products li:hover a:after{margin-top: <script type="text/javascript">positionTextHover([arg1,arg2],arg1); </script>px;}
</style>


Des idées à mon problème ?
Modifié par haschichiuns (14 Jun 2019 - 11:07)
Salut,,

Non cela ne fonctionne pas comme ça Smiley smile

parce que en Jquery tu peux modifier et faire du "css" ..

par exemple :

$(".products li:hover a:after").css("margin-top","ICI TU MET CE QUE TU VEUX");