试图禁止<p>标记直到文本

Question

我创建了一个单击切换功能，我可以控制我的div。我有一个FaQ部分，用户点击一个主题，然后会显示底部部分，但我的<p>标记正在整个行中，而不是仅仅停留在单词上。
这是我想说的图像

我希望当用户悬停一般时，只有鼠标指针应该改变现在，即使用户将鼠标移动到指针改变的整行。

$(document).ready(function() {
  //hide the all of the element with class msg_body
  $(".msg_body").hide();
  //toggle the componenet with class msg_body
  $(".msg_head").click(function() {
    $(this).next(".msg_body").slideToggle(100);
  });
});

.msg_head {
cursor: pointer;
cursor: hand;
font-size: 20px;
text-decoration: underline;
color: red;
float:left;
clear:both;
 }

  .msg_body {
  color: black;
   clear:both;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<p class="msg_head"><i class="fa fa-arrow-circle-right" fa-2x></i>  <span>General:</span>
</p>
<div class="msg_body">
  <p class="msg_head" style="margin-left: 4em;"><i class="fa fa-arrow-circle-right" fa-2x></i> sub question one of genral category</p>
  <div class="msg_body" style="margin-left: 4em;">
    answer to sub question one of genral category
  </div>

Answer 1

这是因为默认p标记是块元素，占用width上的所有可用空间。尝试添加：

.msg_head {
  float:left;
  clear:both;
}
.msg_body {
  clear:both;
}

Answer 2

您可以点击<span>，而不是<p>。 您可以将其包装在<p>中以使其保持块状显示。

＆＃13;

＆＃13;

$(document).ready(function() {
  //hide the all of the element with class msg_body
  $(".msg_body").hide();
  
  //toggle the componenet with class msg_body
  $(".msg_head").on('click', function() {
    $(this).parent().next(".msg_body").slideToggle(100);
  });
  
  console.log($('.msg_head'));
});

＆＃13;

.msg_head {
  cursor: pointer;
  cursor: hand;
  font-size: 20px;
  text-decoration: underline;
  color: red;
}
.msg_body {
  color: black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
  <span class="msg_head">
    <i class="fa fa-arrow-circle-right" fa-2x></i> 
    General:
  </span>
</p>
<div class="msg_body">
  <p>
    <span class="msg_head" style="margin-left: 4em;">
      <i class="fa fa-arrow-circle-right" fa-2x></i>
      sub question one of genral category
    </span>
  </p>
  <div class="msg_body" style="margin-left: 4em;">
    answer to  sub question one of genral category
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;