jQuery wählen Sie "relativ" Kind-element im li-tag

Ich bin irgendwie ein jQuery-Neuling, also Nachsicht mit mir.

Ich versuche, jQuery, fadeIn einem h6-tag auf schweben im inneren des Ankers, die in einer Liste posten, aber IE wird nicht erkannt, dass mein Mauszeiger schwebt über den Anker, weil der Menüpunkt wird oben auf die Spitze in die Markierung. Es funktioniert in jedem anderen browser, aber nicht mit dem IE9 und unten.

Hier das markup für eine bessere Klarheit: ich habe eine Liste der portfolio-thumbnails mit HTML wie folgt:

<ul class="portfolio">
 <li>
  <span class="top-right-corner"></span>
  <span class="bottom-left-corner"></span>
  <a class="popup" href="#interact"><h6>Interact Live</h6></a>
  <img alt="Interact Live" src="images/interact-thumb.jpg" width="529" height="260" />
 </li>
</ul>

CSS ist wie folgt:

.portfolio {
display:inline-block;
overflow:visible;
margin-bottom:40px;
}

.portfolio li {
float:left;
z-index:1;
margin-right:35px;
margin-bottom:58px;
position:relative;
}

.portfolio li.right {
margin-right:0;
}

.portfolio li a {
display:block;
cursor:pointer;
border:1px solid #57bfe6;
position:absolute;
width:99.7%;
height:99.5%;
top:0;
z-index:9;
left:0;
text-decoration:none;
}

.portfolio li a h6 {
background:rgba(3,85,117,0.9);
box-shadow:0 0 40px 30px #003e57 inset;
font-size:66px;
color:#ddf6ff;
text-align:center;
padding-top:100px;
height:163px;
width:99.6%;
}

.portfolio li img {
display:block;
border:3px solid #023d53;
}

.top-right-corner {
background:url('images/about-icons.png') no-repeat -38px -198px;
height:45px;
width:45px;
position:absolute;
top:-10px;
right:-10px;
z-index:10;
}

.bottom-left-corner {
background:url('images/about-icons.png') no-repeat -32px -254px;
height:45px;
width:45px;
position:absolute;
bottom:-10px;
left:-10px;
z-index:10;
}

Des jQuery, fade-in den h6-tag scheint problematisch, und ich bin mir nicht sicher, wie man dieses Problem beheben richtig für den IE:

  $(".portfolio li a h6").hide();
  $(".portfolio li a").hover(function(){
    $(this).children("h6").fadeIn();
  });
  $(".portfolio li a").mouseleave(function(){
    $(this).children("h6").fadeOut();
  });

Wie es scheint, also die nicht erkennen, dass .portfolio-li wird schwebte in den ersten Platz, es stattdessen denkt .portfolio-li wird schwebte, statt .portfolio-li ein. Gibt es eine Möglichkeit, um dies korrekt?

Siehe meine Antwort, Hoffe, es wird hilfreich sein.

InformationsquelleAutor nairbdes | 2012-08-07

Versuchen Sie Dies:

$(".portfolio li a").hide();
$(".portfolio li").hover(function(){
    $(this).children("a").stop(true, true).fadeIn();
},function() {
    $(this).children("a").stop(true, true).fadeOut();
});

SIEHE DEMO

Es funktioniert!! Mucho Gracias!
Usted es bienvenido
upvote, wenn es funktioniert

InformationsquelleAutor Ahsan Khurshid

0

Sollte das problem mit der CSS, wenn das einzige element innerhalb der Anker ist versteckt über ihm schwebt, ist nicht sinnvoll, bitte beachten Sie, dass hover Methode sollte verwendet werden, auf diese Weise:
```
$(".portfolio li").hover(function(){
      $(this).find("h6").fadeIn();
   },function() {
      $(this).find("h6").fadeOut();
});
```
Hmm, das gleiche Problem, nur IE nicht zeigen, dass der h6-tag, wenn ich den Mauszeiger über den li tag parent.
Ich habe das a-tag auf position absolute mit einer definierten Breite und Höhe, so dass, wenn der h6-tag versteckt, der eine tag sollte noch da sein, richtig?
Ja, aber ich bin mir nicht sicher über IE.
Bitte fühlen Sie sich frei, um die website zu besuchen, die ich in IE zu sehen, das Problem aus Erster hand. Ich Schätze die Hilfe!
Siehe meine Antwort, Hoffe, es wird hilfreich sein.

InformationsquelleAutor undefined

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.