Question

Got a list with 3 items. Upon hovering over a item information shall be displayed. Works fine within same <DIV>. How about displaying information from another <DIV>, I guess this should be possible, isn t it?

Initially only the three lisitings are displayed. When hovering over listing 2 the content of #special can be displayed, no problem.

When hovering over listing 3 the content of #AlsoSpecial is not displayed, Why?. Is there a remedy?

样本:

<div id="top">
   <ul>
        <li class="left">listing 1</li>
        <li class="center">listing 2</li>
        <li class="right">listing 3</li>
        <li><div id="special">
            <p>bla1bla1bla1</p>
        </div></li>
    </ul>
</div>

<div id="content">
    <div id="AlsoSpecial">
        <p>bla2bla2bla2</p>
    </div>
</div>

Sample CSS:

#top > li {display:inline;}

/*this works fine*/
div#special {display:none;}
.center:hover div#special {display:block;}

/*this does not work, WHY?*/
div#AlsoSpecial {display:none;}
.right:hover div#AlsoSpecial {display:block;}

Answer 1

When an element is sibling of another one, you should use the + selector. So, doing this should do it.-

li:hover + div#special

However, note that UL elements expect only LI elements inside, adding something different is illegal and you should not.

I recommend you to place the DIV element inside of the element you want to hover. So a much better solution would be

...
<li>text
    <div>contents</div>
</li>
...

......仿照CSS的甄选者。 -

li:hover > div#special

考虑使用}=“special”,而不是ID,如果你想对这一 h余事件作出不止一个DIV反应,......记住,身份证是独一无二的,不能用于一个以上要素。

如果你想与科索沃安全局一道做一个“不匹配”的影子,那么你就不得不使用Javascript,这是在这里的Javascript中这样做的一个例子。 -

var toShow  = document.getElementById( alsoSpecial ),
    toHover = document.getElementById( toHover ), // ...for instance.
    showOrNot = function(e)
    {
        toShow.style.display = (e.type ==  mouseover )?
             block :  none ;
    };
toHover.addEventListener( mouseover , showOrNot, 1);
toHover.addEventListener( mouseout ,  showOrNot, 1);

我把该法典打成一类,没有尝试。如果它不工作,我希望它能干 works,请让我知道。

页: 1

Answer 2

由于“AlsoSpecial”的div <>/code>不是任何“权利”要素中的一种儿童要素,但你试图使用与之匹配。



我认为,使用标准的经济、社会、文化权利委员会的遴选人,你将很难与不属于“兄弟姐妹”或“后代”关系的任何东西相匹配。

在本案中,我将诉诸于 Java文。

Answer 3

所提供的两个答复都是正确的,但我决定采用以下尽可能少的法典(可能是过时的):

<script type="text/javascript">
/*<![CDATA[*/
    function showDetails()
    {document.getElementById("AlsoSpecial").style.display="block";}
    function hideDetails()
    {document.getElementById("AlsoSpecial").style.display="none";}
/* ]]> */
</script>

<body>
    ...
    <a title="Display Details" href="#AlsoSpecial" rel="nofollow" onmouseover="showDetails()" onmouseout="hideDetails()">View Details</a>
    ...
    <div id="AlsoSpecial">
        <p>bla2bla2bla2</p>
    </div>
</body>

谢谢大家。

友情链接