Untitled

Is it preferred to use css instead of jquery when both get the same job done?
<style type="text/css">span:hover {background: yellow;}</style>
<span>Hello!</span>

<style type="text/css">span.highlight{background:yellow;}</style>
<script type="text/javascript">
$("span").hover(function () {
    $(this).addClass("highlight");
    }, function () {
    $(this).removeClass("highlight");
});
<span>Hello!</span>

$("span").hover(function () {
    $(this).addClass("highlight");
    }, function () {
    $(this).removeClass("highlight");
});

$("span").hover(function () {
      $(this).animate({width:'100px'}, 500);
      $(".other-div").fadeIn(200);
    }, function () {
      $(this).animate({width:'50px'}, 500);
      $(".other-div").fadeOut(200);
});