Html css下拉div未出现在悬停状态

在下面的代码中，我希望每当我将鼠标悬停在.main上时，

.dropright

-div（包含文本：“This is dropright”）就会出现在

.main

div（包含文本：“This is main text.”）的右侧。这可能是什么原因

html，
身体{
边际：0px；
身高：100%；
/*[禁用]宽度：100%*/
左：0px；
顶部：0px；
背景色：rgba（255、255、255、1）；
}
a{
文字装饰：无；
}
.包装纸{
文本对齐：居中；
边际上限：0；
左边距：自动；
身高：100%；
最大宽度：960像素；
背景色：rgba（0,0,0,1）；
右边距：自动；
位置：相对位置；
}
梅因先生{
高度：自动；
宽度：25%；
颜色：rgba（255，255，255，1）；
右边距：自动；
左边距：自动；
背景色：rgba（204、204、204、1）；
边框：薄实心rgba（255、255、255、1）；
显示：内联块；
}
dropright先生{
背景色：rgba（0,0,255,1）；
高度：自动；
宽度：25%；
显示：无；
位置：绝对位置；
左缘：2.5%；
}
a:悬停{
文字装饰：下划线；
}
.main:悬停。右下角{
显示：内联块；
}

这是对的

您正在尝试执行需要jQuery或Javascript的操作

$(document).ready(function() {
    $('.main').on('mouseenter', function() {
        $('#right').addClass('dropright');
    });
});

---

你需要换个班

到

html，正文{
边际：0px；
身高：100%；
/*[禁用]宽度：100%*/
左：0px；
顶部：0px；
背景色：rgba（255255,1）；
}
a{
文字装饰：无；
}
.包装纸{
文本对齐：居中；
边际上限：0；
左边距：自动；
身高：100%；
最大宽度：960像素；
背景色：rgba（0,0,0,1）；
右边距：自动；
位置：相对位置；
}
梅因先生{
高度：自动；
宽度：50%；
颜色：rgba（255255,1）；
右边距：自动；
左边距：自动；
背景色：rgba（204204,1）；
边框：薄实心rgba（255255,1）；
显示：内联块；
}
dropright先生{
背景色：rgba（0,0255,1）；
高度：自动；
宽度：25%；
显示：无；
/*[禁用]位置：绝对位置*/
}
a:悬停{
文字装饰：下划线；
}
.下拉框：悬停.右下拉{
显示：内联块；
}

这是对的

检查此代码是否悬停在主类上：

html，正文{
边际：0px；
身高：100%；
/*[禁用]宽度：100%*/
左：0px；
顶部：0px；
背景色：rgba（255255,1）；
}
a{
文字装饰：无；
}
.包装纸{
文本对齐：居中；
边际上限：0；
左边距：自动；
身高：100%；
最大宽度：960像素；
背景色：rgba（0,0,0,1）；
右边距：自动；
位置：相对位置；
}
梅因先生{
高度：自动；
宽度：50%；
颜色：rgba（255255,1）；
右边距：自动；
左边距：自动；
背景色：rgba（204204,1）；
边框：薄实心rgba（255255,1）；
显示：内联块；
}
dropright先生{
背景色：rgba（0,0255,1）；
高度：自动；
宽度：25%；
显示：无；
/*[禁用]位置：绝对位置*/
}
a:悬停{
文字装饰：下划线；
}
.main:悬停。右下角{
显示：内联块；
}

这是对的

这不是它的工作方式，

.main a:hover.dropright

选择器没有选择任何元素。请阅读选择器。不过，您可以做的一件事是将

.dropright

移动到

的内部，然后使用选择器

。main:hover.dropright

。您好，sarika。这正是我想要的。但是您在哪里定义的呢d

下拉框的规则是什么？为什么要将.dropdown框作为所有div的父项？在：hover.droplight{display:inline block；}中没有意义如果你想显示内联block.droplight，它应该在其父元素上悬停OK。因此，据我所知，你创建类下拉框只是因为你可以在其子元素上定义悬停规则：
.dropright
。我说得对吗？是的，它是根据css悬停规则定义的，然后是Sarika，你能解释一下吗为什么我定义
.main:hover.dropright{display:inline block；}时会出现这种情况
这不起作用？毕竟
。main
也是
dropright
的父级？然后，您将为mouseleave编写一个相同的函数。我可以在明天醒来时编写一个完全起作用的版本。我现在在手机上。您还可以从html div中删除topright类（但保留在css文件中）而是给它一个“正确”的id，如果你想在我开始之前亲自尝试jquery，或者有人偷了我的雷霆，也可以从右上角的css中删除display none。听起来你开始尝试一些简单的旧css无法再为你做的事情。哦，等待着你的javascript的欢乐旅程。我喜欢一些憎恨我的人的否决票，他们可能对我的答案是正确的。谢谢。越早越好。有人给我写了一个史诗般的javascript函数，然后坏苹果就出来了。我建议更新这个答案来解释后代选择器和相邻兄弟选择器之间的差异。
.main a:hover .dropright {
    display: inline-block;  
}

.main:hover + .dropright {
    display: inline-block;  
}