Как при помощи css , при наведении на один див появлялся другой?
Только если один вложен в другой:div.outer div.inner {
    display: none;
}
div.outer:hover div.inner {
    display: block;
}
Либо один идет прямо следом за другим:div.first + div.second {
    display: none;
}
div.first:hover + div.second {
    display: block;
}
@barkalov забыл еще про один селектор:
 div.first ~ div.fourth {
    display: none;
}
div.first:hover ~ div.fourth {
    display: block;
}
Тогда элементам достаточно просто иметь общего родителя.
codepen.io/iiil/pen/paLum