Question

如何将鼠标悬停在一个对象上并影响其他内容？在我的代码中，当我将鼠标悬停在向下箭头上时，我正试图获得一个下拉列表。我试图用CSS而不是jquery或JS。

HTML

<span class="MyDropDown">Menu Name
    <ul class="MyDropDownList">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul> 
</span>

JS

var x = document.getElementsByClassName('MyDropDown');
for (i = 0; i < x.length; i++) {
    var s = x[i].innerHTML.split("<")[0];
    var l = '<' + x[i].innerHTML.split("<")[1];
    x[i].innerHTML = '<table>\n<tr>\n<td>' + s + '</td>\n<td><div></div></td>\n</tr>\n</table>\n' + l;
}

CSS

.MyDropDown {
    display: inline-block;
    background-color: #333;
    color: #FFF;
    border-radius: 5px;
    white-space: nowrap;
}

.MyDropDown td:nth-child(1) {
    padding:5px 15px;
    border-right:1px solid #777777;
}
.MyDropDown td:nth-child(1):hover {
    color:#CCC;
}

.MyDropDown div:first-child {
    margin: 0px 5px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;    
    border-top: 4px solid #FFF;
}
.MyDropDown ul {
    display:none;
}
.MyDropDown td:nth-child(2):hover > div:first-child {
    border-top-color:#CCC;
}
.MyDropDown td:nth-child(2):hover > td:first-child{ /*this one*/
    border-bottom:1px solid #777777;
}
.MyDropDown td:nth-child(2):hover > ul { /*this one*/
    display:block;
    min-height:15px;
}

Answer 1

只悬停在右边的箭头上？

http://jsfiddle.net/coma/b8nt16eo/

div.menu > div.arrow:hover + ul {
    display: block;
}

将鼠标悬停在一个对象上并使用CSS（不是jquery）影响另一个对象

1 个答案: