cssとajaxの質問です｡補足に記入したｺｰﾄﾞが色々試しているのですが､なかなか希望通り動作しなくて困っています｡ (1)  の部分…

人力検索はてな

ﾓﾊﾞｲﾙ版を表示しています｡PC版はこちら

cssとajaxの質問です｡
補足に記入したｺｰﾄﾞが色々試しているのですが､なかなか希望通り動作しなくて困っています｡

(1)  の部分ですがCSSで画像を指定しているのですが画像が表示されません｡spanをdivに変更すると画像が表示されるのですが､なぜspanで表示されないかわからずにいます｡なにか書き方でおかしいところはありますか？

(2)  の半角ｽﾍﾟｰｽをｸﾘｯｸしてもjQueryが無反応です｡いろいろ検索してみますが､何がおかしいのか辿り着けずにいます｡

経験者の方ご指導よろしくお願いします｡

●質問者: appfb
●ｶﾃｺﾞﾘ:ｳｪﾌﾞ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

● 質問者から

<!DOCTYPE html>
<html lang="ja">
<head>
<{$content_type|smarty:nodefaults}>
<link rel="stylesheet" href="<{$root_surl}>css/master.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
//--- ajax
function postLike(){
var fb_id = '<{$fb_id}>';
var quiz_id = '<{$quiz_id}>';
$.ajax({
type: 'post',
url: 'question.php',
data: {fbid:fb_id, quizid:quiz_id},
success: function(data){
},
error: function(jqXHR, status, error){
}
});
}
$(function(){
$("span.nextLike").click(postLike);
});
</script>

<style type="text/css">
<!--
.nextLike {
background: url(../images/likeButton.png) no-repeat 0 0;
width: 40px;
height: 40px;
_width: 40px;
_height: 40px;
cursor: pointer;
}
.nextLike:hover {
background-position: 0px -40px;
}

-->
</style>
</head>

<body>

<span class="nextLike">&nbsp;</span>

</body>
</html>

▽1 ● nobuoka
●100ﾎﾟｲﾝﾄ

ﾍﾞｽﾄｱﾝｻｰ

(1) についてですが､span 要素はｲﾝﾗｲﾝ要素なので､CSS の width ﾌﾟﾛﾊﾟﾃｨや height ﾌﾟﾛﾊﾟﾃｨで幅や高さを指定しても無視されます｡背景画像が表示されないのではなくて､要素の大きさが期待通りの大きさになっていないのではないでしょうか?

appfbさんのｺﾒﾝﾄ
ご回答ありがとうございます｡まじですか･･･では､画像を横に2つ並べhover時に画像を変更したいときは､div要素でfloatを噛ますしかないのですかね？

nobuokaさんのｺﾒﾝﾄ
ｲﾝﾗｲﾝ要素のように扱えて､幅や高さを指定できるようにするには <code>span</code> 要素に <code>display: inline-block;</code> という CSS をあてればよいです｡

appfbさんのｺﾒﾝﾄ
ありがとうございます｡早速試してみます｡

appfbさんのｺﾒﾝﾄ
できましたｰｰ！勉強になりました｡早速ｲﾝﾗｲﾝ要素について念入りに読んでみます｡ありがとうございました｡